Image Get Requests mit AngularJS

Ich speichere die Quellzeichenfolge eines Bildes, das in HTML im AngularJS-Controller gerendert werden soll, aber es ergibt eine 404, bevor der Angular-Controller initialisiert wird.

Hier ist der HTML:

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

Winkelregler:

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

Und der Fehler, den ich bekomme (%7D%7D entspricht dem {{in der Vorlage).

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

Wie kann ich dies verhindern? Das heißt, laden Sie das Image nur, wenn der Angular Controller initialisiert wurde?

Versuchen Sie, Ihren src durch ng-src zu ersetzen. Weitere Informationen finden Sie in der Dokumentation :

Die Verwendung von Angular-Markups wie {{hash}} in einem src-Attribut funktioniert nicht richtig: Der Browser ruft von der URL mit dem Literaltext {{hash}} ab, bis Angular den Ausdruck in {{hash}} ersetzt. Die ngSrc-Direktive löst dieses Problem.

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

Wenn jemand nach einer Lösung für das Styling von Hintergrundbildern sucht, verwenden Sie diese:

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