Yo soy el almacenamiento de la cadena de origen de una imagen en HTML en el controlador de AngularJS, sin embargo, se produce un error 404 antes de que el Angular controlador se inicializa.

Aquí está el código HTML:

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

Angular de controlador:

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

Y el error (%7D%7D corresponde a la {{ en la plantilla).

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

¿Cómo puedo evitar que esto suceda? Es decir, solo carga la imagen cuando el Angular controlador ha sido inicializado?

InformationsquelleAutor ssb | 2012-10-16

2 Comentarios

  1. 226

    Prueba a sustituir el src con ng-src para más información ver la documentación:

    El uso de Angulares marcado como {{hash}} en un atributo src no funciona
    a La derecha: el navegador obtendrá a partir de la URL con el texto literal
    {{hash}} hasta Angular sustituye a la expresión dentro de {{hash}}. El
    ngSrc directiva resuelve este problema.

     <div ng-controller="Cont">
          <img ng-src="{{imageSource}}">
     </div>
    • Es mejor usar data-ng-controller y data-ng-src para que el código HTML es válido.
  2. 6

    Si alguien lo está buscando la solución para el estilo de imagen de fondo, a continuación, utilice esto:

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

Dejar respuesta

Please enter your comment!
Please enter your name here