Immagine Ottieni richieste con AngularJS

Question

Sto memorizzando la stringa sorgente di un'immagine da rendere in HTML nel controller AngularJS, tuttavia produce un 404 prima che il controller Angolare sia inizializzato.

Ecco il codice HTML:

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

regolatore angolare:

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

E l'errore che ottengo (%7D%7D corrisponde alla {{ nel modello).

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

Come posso evitare che ciò accada? Cioè, caricare l'immagine solo quando il controller angolare è stato inizializzato?

Answer 1

provare a sostituire il vostro src con ng-src per maggiori informazioni visita the documentation:

Utilizzando markup angolare come {{hash}} in un attributo src non funziona destra: Il browser preleverà dal URL con il testo letterale {{hash}} fino a quando Angular sostituisce l'espressione all'interno di {{hash}}. La direttiva ngSrc risolve questo problema.

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

Answer 2

Se qualcuno sta cercando la soluzione stile background-image per poi usare questo:

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