Cómo ocultar silenciosamente el icono "Imagen no encontrada" cuando no se encuentra la imagen de origen src

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

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

Puede usar el onerrorevento 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 preguntaste):

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

O para todas las imágenes:

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

Debe usar en visibility: hiddenlugar de .hide()si ocultar las imágenes puede cambiar el diseño. Muchos sitios en la web usan una imagen predeterminada "sin imagen" en su lugar, apuntando el srcatributo a esa imagen cuando la ubicación de la imagen especificada no está disponible.

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

Modifiqué ligeramente la solución sugerida por Gary Willoughby, porque muestra brevemente el icono de imagen rota. Mi solución:

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

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

Para ocultar cada error de imagen, simplemente agregue este JavaScript en la parte inferior de su 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. 
        }
    }
})();

Puede que sea un poco tarde para responder, pero aquí está mi intento. Cuando enfrenté el mismo problema, lo solucioné usando un div del tamaño de la imagen y configurando la imagen de fondo para este div. Si no se encuentra la imagen, el div se vuelve transparente, por lo que todo se hace silenciosamente sin el código java-script.

Haciendo una investigación rápida sobre la respuesta de Andy E , no es posible live()vincular error.

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

Entonces tienes que ir como

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

vinculante directamente al error event handlercrear un nuevo elemento.

Encontré un método ingenioso para hacer exactamente esto, sin dejar de ser funcional cuando uso la ng-srcdirectiva en Angular.js y me gusta ...

<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, este gif podría mantenerse dentro de alguna variable global para que no estropee las plantillas.

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

y use

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

etc.

Solo usa CSS simple

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}