Solicitudes de obtención de imágenes con AngularJS

Estoy almacenando la cadena de origen de una imagen para renderizar en HTML en el controlador AngularJS, sin embargo, produce un 404 antes de que se inicialice el controlador Angular.

Aquí está el HTML:

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

Controlador angular:

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

Y el error que obtengo ( %7D%7Dcorresponde al {{de la plantilla).

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

¿Cómo puedo evitar que esto suceda? Es decir, ¿solo cargar la imagen cuando se haya inicializado el controlador Angular?

Intente reemplazar su src con ng-src para obtener más información, consulte la documentación :

El uso de marcado angular como {{hash}} en un atributo src no funciona correctamente: el navegador buscará de la URL con el texto literal {{hash}} hasta que Angular reemplace la expresión dentro de {{hash}}. La directiva ngSrc resuelve este problema.

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

Si alguien está buscando la solución para diseñar una imagen de fondo, use esto:

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