angularjs - ejemplos - ng-src vacío no actualiza la imagen

angularjs pdf

Question

Estoy utilizando la directiva ng-src para evitar que el navegador solicite la imagen antes de que Angular evalúe la expresión.

ng-src={{image}} actualizará el atributo src de la imagen si cambia la expresión "imagen". Entiendo mal por qué la directiva ng-src no actualiza la ruta de la imagen si la expresión ("myImage.png") se vuelve vacía ("").

Cuando la expresión se vuelve vacía, el atributo ng-src se vuelve vacío pero el atributo src sigue siendo el último src conocido. Así que no actualiza la imagen. Por qué el atributo src no se actualiza (a un src vacío) para que la imagen "desaparezca".

Aquí hay un plunker

Gracias

Answer 1

Actualización (abril 2015)

Vea la respuesta del desarrollador, al parecer, este método que sugerí originalmente puede no funcionar en todos los navegadores.

Original (febrero 2014)

No estoy completamente seguro de por qué está sucediendo, pero aquí hay una manera de resolverlo de todos modos. Agregue esta función a su controlador:

$scope.getImage = function(src) {
  if (src !== "") {
    return src;  
  } else {
   return "//:0"; 
  }
};

La imagen "en blanco" obtendrá una fuente de //:0 que no hará que aparezca un icono de imagen faltante (consulte la respuesta principal en here ).

Entonces puedes configurar tu fuente usando:

<img ng-src="{{getImage(superImage)}}" />

EDITAR:

En realidad, sería más fácil cambiar el botón haciendo clic en este:

<button ng-click="superImage = ''//:0''">Remove superImage</button>

Entonces no hay necesidad de la función. Aunque creo que el método de función es mejor.

Answer 2

La respuesta a esto está en el código Angular . No es un error, es solo el comportamiento que decidieron que querían. A partir de la línea 13895, puede ver este código de directiva:

forEach([''src'', ''srcset'', ''href''], function(attrName) {
   var normalized = directiveNormalize(''ng-'' + attrName);
   ngAttributeAliasDirectives[normalized] = function() {
   return {
      priority: 99, // it needs to run after the attributes are interpolated
      link: function(scope, element, attr) {
          attr.$observe(normalized, function(value) {

         if (!value)
             return;

         attr.$set(attrName, value);

         if (msie) element.prop(attrName, attr[attrName]);
       });
     }
    };
  };
});

La clave está en:

if (!value) return;

Como puede ver, si cambia la expresión ng-src a una cadena vacía, esto nunca cambiará el valor de src real. Puedes solucionar esto haciendo lo que MadScone sugirió.

Answer 3

La sugerencia de MadScone es una buena idea, pero no funcionó para mí en todos los navegadores. Terminé mostrando el elemento solo cuando el src no está vacío:

<img ng-show="theImage!==''''" ng-src="{{theImage}}">

Esta me parece la opción más segura después de leer el hilo al que MadScone hizo referencia ( here ). Como indicaron varias personas allí, la respuesta aceptada no funciona en todos los navegadores y tiene otros problemas que podrían surgir. Simplemente ocultando el elemento evita todo eso.

Actualización: como señala Enpenax en los comentarios, el !=='''' en el ng-show es totalmente innecesario. Aquí está la versión más limpia:

<img ng-show="theImage" ng-src="{{theImage}}">

Answer 4

Otra forma corta de resolverlo: <img ng-src="{{image?image:'' ''}}" />

Answer 5

Una posible solución para vaciar ng-src se puede encontrar here.

<img ng-src="{{image || ''//:0'' }}" />

La explicación detallada para usar //:0 se puede encontrar en esta respuesta.

Para resumir:

Adopta el protocolo actual, omite el nombre de host y establece el puerto en cero, que no es válido y debe ser eliminado por la capa de red.

Además, en lugar de vaciar ng-src , si tiene una fuente de imagen predeterminada, simplemente puede configurar ng-src en esa fuente predeterminada cuando ng-src tiene que estar vacío.

Answer 6

arreglarlo por el valor establecido = ""; con espacios en blanco.

También agrego el siguiente css para asegurarme de que no se muestre.

img[src="_"]
    display none !important

la verdadera razón se ha discutido aquí: https://github.com/angular/angular.js/issues/1218

Answer 7

ng-hide y ng-show pueden ayudarte a resolverlo

<img ng-src="{{Image}}" ng-hide="Image == null" ng-show="Image != null" ng-click="ChooseImage()" width="100%"  />

$ scope.Image = null;

o

<img ng-src="{{Image}}" ng-hide="Image === ''''" ng-show="Image !== ''''" ng-click="ChooseImage()" width="100%"  />

$ scope.Image = '''';

Answer 8

<img data-ng-src="{{image || ''http://www.1x1px.me/FFFFFF-0.png''}}" data-ng-model="image">

Puede elegir cualquier imagen 1x1px que se adapte a su sitio web y reemplazar http://www.1x1px.me/FFFFFF-0.png de su propiedad. Para mi sitio web utilizo la imagen disponible en http://www.1x1px.me .

P / S: No hay necesidad de preocuparse por el atributo src original de la etiqueta img porque no está afectado al modelo de imagen

Answer 9

 <img src="{{superImage}}" />   

Esto funciona como se espera Editar:

Otro trabajo alrededor, puede ser que podría haber usado una cadena vacía.

ng-click="superImage = '' ''  

para dejarlo vacío. No dispara 404