Solicitações de obtenção de imagens com AngularJS

Estou armazenando a string de origem de uma imagem a ser renderizada em HTML no controlador AngularJS, no entanto, produz um 404 antes que o controlador Angular seja inicializado.

Aqui está o HTML:

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

Controlador angular:

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

E o erro que recebo ( %7D%7Dcorresponde ao {{no modelo).

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

Como posso evitar que isso aconteça? Ou seja, só carregar a imagem quando o controlador Angular tiver sido inicializado?

Tente substituir seu src por ng-src para obter mais informações, consulte a documentação :

Usar a marcação Angular como {{hash}} em um atributo src não funciona direito: o navegador buscará na URL com o texto literal {{hash}} até que Angular substitua a expressão dentro de {{hash}}. A diretiva ngSrc resolve esse problema.

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

Se alguém está procurando a solução para estilizar a imagem de fundo, use isto:

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