Come nascondere silenziosamente l'icona "Immagine non trovata" quando l'immagine sorgente src non viene trovata

Sai come nascondere la classica icona "Immagine non trovata" da una pagina HTML sottoposta a rendering quando un file immagine non viene trovato?

Qualche metodo di lavoro che utilizza JavaScript / jQuery / CSS?

Puoi utilizzare l' onerrorevento in JavaScript per agire quando un'immagine non viene caricata:

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

In jQuery (dato che hai chiesto):

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

O per tutte le immagini:

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

Dovresti usare al visibility: hiddenposto di .hide()se nascondere le immagini potrebbe cambiare il layout. Molti siti sul Web utilizzano invece un'immagine predefinita "nessuna immagine", che punta l' srcattributo a quell'immagine quando la posizione dell'immagine specificata non è disponibile.

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

Ho leggermente modificato la soluzione suggerita da Gary Willoughby, perché mostra brevemente l'icona dell'immagine rotta. La mia soluzione:

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

Nella mia soluzione l'immagine è inizialmente nascosta e viene mostrata solo quando viene caricata con successo. Ha uno svantaggio: gli utenti non vedranno le immagini caricate a metà. E se l'utente ha disabilitato JS, non vedrà mai alcuna immagine

Per nascondere ogni errore di immagine, aggiungi questo JavaScript nella parte inferiore della pagina (appena prima del tag di chiusura del corpo):

(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. 
        }
    }
})();

Potrebbe essere un po 'tardi per rispondere, ma ecco il mio tentativo. Quando ho riscontrato lo stesso problema, l'ho risolto utilizzando un div delle dimensioni dell'immagine e impostando l'immagine di sfondo su questo div. Se l'immagine non viene trovata, il div viene reso trasparente, quindi è tutto silenzioso senza codice java-script.

Facendo una rapida ricerca sulla risposta di Andy E , non è possibile live()vincolarla error.

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

Quindi devi andare come

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

vincolando direttamente la error event handlercreazione di un nuovo elemento.

ho trovato un metodo ingegnoso per fare esattamente questo, pur essendo ancora funzionale quando si usa la ng-srcdirettiva in Angular.js e come ...

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

è fondamentalmente una GIF trasparente più corta (come si vede http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% D0% B5% D1% 80 / [20121112]% 20Il% 20smallest% 20transparent% 20pixel.html )

ovviamente questa gif potrebbe essere tenuta all'interno di qualche variabile globale in modo da non rovinare i modelli.

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

e utilizzare

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

eccetera.

Basta usare semplici css

.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;
}