Cómo ocultar de forma silenciosa el icono "Imagen no encontrada" cuando no se encuentra la imagen original del src

Question

¿Sabe cómo ocultar el clásico "Imagen no encontrada" icono de una página HTML procesada cuando no se encuentra un archivo de imagen?

¿Algún método de trabajo usando JavaScript/jQuery/CSS?

Answer 1

Usted puede utilizar el evento onerror en JavaScript para actuar cuando una imagen no se carga:

var img = document.getElementById("myImg"); 
img.onerror = function() { 
    this.style.display = "none"; 
} 

En jQuery (ya que lo preguntas):

$("#myImg").error(function() { 
    $(this).hide(); 
}); 

O para todas las imágenes:

$("img").error(function() { 
    $(this).hide(); 
    // or $(this).css({visibility:"hidden"}); 
}); 

Debe usar visibility: hidden en lugar de .hide() si está oculto th Las imágenes pueden cambiar el diseño. Muchos sitios en la web utilizan una imagen predeterminada "sin imagen" en su lugar, señalando el atributo src a esa imagen cuando la ubicación de la imagen especificada no está disponible.

Answer 2

Haciendo una búsqueda rápida en respuesta Andy E 's, no es posible live() unen error.

// won't work (chrome 5) 
$('img').live('error', function(){ 
    $(this).css('visibility', 'hidden'); 
}); 

así que hay que ir como

$('<img/>', { 
    src: 'http://www.notarget.com/fake.jpg', 
    error: function(e){ 
    $(this).css('visibility', 'hidden'); 
    } 
}).appendTo(document.body); 

directamente la unión del error event handler en la creación de un nuevo elemento.

Answer 3

<img onerror='this.style.display = "none"'> 

Answer 4

Para ocultar todos los errores de imagen, basta con añadir este JavaScript en la parte inferior de la página (justo antes de la etiqueta del cuerpo de cierre):

(function() { 
    var allimgs = document.images; 
    for (var i = 0; i < allimgs.length; i++) { 
     allimgs[i].onerror = function() { 
      this.style.visibility = "hidden"; // Other elements aren't affected. 
     } 
    } 
})(); 

Answer 5

Puede ser poco tarde para contestar, pero aquí es mi intento. Cuando se enfrentó al mismo problema que fija mediante el uso de un div del tamaño de la imagen & entorno Imagen de fondo de este div. Si no se encuentra la imagen, el div se vuelve transparente, por lo que su todo hecho en silencio y sin código de Java-Script.

Answer 6

he encontrado un método ingenioso para hacer exactamente esto, al tiempo que sigue siendo funcional cuando se utiliza ng-src Directiva en angularjs y como ...

<img 
    ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
    onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='" 
    /> 

es básicamente un GIF transparente más corto (como se ve http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82%D0%B5%D1%80/[20121112]%20The%20smallest%20transparent%20pixel.html)

por supuesto esto gif podría mantenerse dentro de alguna variable global, por lo que no se hace un lío las plantillas.

<script> 
    window.fallbackGif = "..." 
</script> 

y utilizar

<img 
    ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
    onerror="this.src=fallbackGif" 
    /> 

etc.

Answer 7

He modificado ligeramente solución sugerida por Gary Willoughby, porque muestra brevemente la imagen rota.Mi solución:

<img src="..." style="display: none" onload="this.style.display=''"> 

En mi solución, la imagen está oculta inicialmente y solo se muestra cuando se carga con éxito. Tiene una desventaja: los usuarios no verán imágenes cargadas. Y si el usuario ha desactivado JS, entonces nunca verá ninguna imagen