Immagine Ottieni richieste con AngularJS

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

Ecco l'HTML:

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

Controller angolare:

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

E l'errore che ottengo ( %7D%7Dcorrisponde al {{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 Angular è stato inizializzato?

Prova a sostituire il tuo src con ng-src per maggiori informazioni vedi la documentazione :

L'uso del markup angolare come {{hash}} in un attributo src non funziona correttamente: il browser recupera dall'URL con il testo letterale {{hash}} fino a quando Angular non sostituisce l'espressione all'interno di {{hash}}. La direttiva ngSrc risolve questo problema.

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

Se qualcuno sta cercando la soluzione per lo styling dell'immagine di sfondo, usa questo:

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