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


106

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?

Respostas:


230

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>

2
É melhor usar data-ng-controller e data-ng-src para que o HTML seja válido.
Juampy NR

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.