Jak tiše skrýt ikonu „Obrázek nenalezen“, když nebyl nalezen zdrojový obrázek src

Víte, jak skrýt klasické „Obrázek nenalezen“ ikonu z vykreslené stránky HTML, když nebyl nalezen soubor obrázku?

Nějaká pracovní metoda využívající JavaScript/jQuery/CSS?

Odpověď

Můžete použít onerror událost v JavaScriptu, která zareaguje, když se obrázek nepodaří načíst:

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

V jQuery (když jste se zeptali):

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

Nebo pro všechny obrázky:

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

Měli byste použít visibility: hidden místo .hide() pokud by skrytí obrázků mohlo změnit rozvržení. Mnoho webů na webu místo toho používá výchozí obrázek „bez obrázku“, který ukazuje src atribut k tomuto obrázku, když zadané umístění obrázku není k dispozici.