systempuntoout systempuntoout - 1 year ago 75
Javascript Question

How to silently hide "Image not found" icon when src source image is not found

Do you know how to hide the classic “Image not found” icon from a rendered HTML page when an image file is not found?

Any working method using JavaScript/jQuery/CSS?

Answer Source

You can use the onerror event in JavaScript to act when an image fails to load:

var img = document.getElementById("myImg");
img.onerror = function () { = "none";

In jQuery (since you asked):

$("#myImg").error(function () { 

Or for all images:

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

You should use visibility: hidden instead of .hide() if hiding the images might change the layout. Many sites on the web use a default "no image" image instead, pointing the src attribute to that image when the specified image location is unavailable.