Image Otrzymuję żądania z AngularJS

Question

Przechowuję ciąg źródłowy obrazu, który ma być renderowany w kodzie HTML w sterowniku AngularJS, jednak uzyskuje on wartość 404 przed zainicjowaniem kontrolera Angular.

Oto HTML:

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

kątowa kontroler:

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

A błąd pojawia się (%7D%7D odpowiada {{ w szablonie).

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

Jak mogę temu zapobiec? To znaczy, załaduj obraz dopiero po zainicjowaniu kontrolera kątowego?

Answer 1

Spróbuj zastąpienie SRC z NG-src, aby uzyskać więcej informacji zobacz the documentation:

Korzystanie kątowa znaczników jak hash {{}} w atrybucie src nie działa rację: Przeglądarka pobierze od Adres URL z literalnym tekstem {{hash}} dopóty, 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> 

Answer 2

Jeśli ktoś szuka rozwiązania dla stylizacji background-image następnie użyj:

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