Image Get Request with AngularJS

Przechowuję ciąg źródłowy obrazu do renderowania w formacie HTML w kontrolerze AngularJS, jednak przed zainicjowaniem kontrolera Angular zwraca 404.

Oto kod HTML:

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

Kontroler kątowy:

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

A błąd jaki otrzymuję ( %7D%7Dodpowiada {{w szablonie).

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

Jak mogę temu zapobiec? Czyli ładować obraz tylko po zainicjowaniu kontrolera Angular?

Spróbuj zamienić src na ng-src, aby uzyskać więcej informacji, zobacz dokumentację :

Używanie znaczników Angular, takich jak {{hash}} w atrybucie src, nie działa prawidłowo: przeglądarka pobierze z adresu URL literał tekstowy {{hash}}, dopóki Angular nie zastąpi wyrażenia wewnątrz {{hash}}. Dyrektywa ngSrc rozwiązuje ten problem.

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

Jeśli ktoś szuka rozwiązania do stylizacji obrazu tła, użyj tego:

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