AngularJS로 이미지 가져 오기 요청

AngularJS 컨트롤러에서 HTML로 렌더링 할 이미지의 소스 문자열을 저장하고 있지만 Angular 컨트롤러가 초기화되기 전에 404가 생성됩니다.

다음은 HTML입니다.

 <div ng-controller="Cont">
      <img src="{{imageSource}}">
 </div>

각도 컨트롤러 :

 var Cont = function($scope) {
      $scope.imageSource = '/tests.png';
 }

그리고 내가 얻는 오류는 ( 템플릿 %7D%7D의 {{에 해당).

 GET https://localhost:9000/%7B%7BimageSource%7D%7D 404 (Not Found) 

이런 일이 발생하지 않도록하려면 어떻게해야합니까? 즉, Angular 컨트롤러가 초기화되었을 때만 이미지를로드합니까?

자세한 내용 은 설명서를 참조하십시오 .src를 ng-src로 바꾸십시오 .

src 속성에서 {{hash}}와 같은 Angular 마크 업을 사용하는 것은 제대로 작동하지 않습니다. Angular가 {{hash}} 내의 표현식을 바꿀 때까지 브라우저는 리터럴 텍스트 {{hash}}가있는 URL에서 가져옵니다. ngSrc 지시문은이 문제를 해결합니다.

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>

누군가가 배경 이미지 스타일링 솔루션을 검색하는 경우 다음을 사용하십시오.

<div ng-style="{'background-image': 'url({{ image.source }})'}">...</div>