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


Tags: javascript,jquery,html,css,image

Problem :

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?



Solution :

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

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

In jQuery (since you asked):

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

Or for all images:

$("img").error(function () { 
    $(this).hide();
    // 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.


    CSS Howto..

    How to center inline blocks together with text vertically without space at bottom?

    Animation performance jQuery, css transition ? How can i have a better performance here?

    How to parse css (stylesheet) comments (annotations)?

    How to setting a Class in a conditional statement of Javascript?

    How to put a background video loop on a website HTML/CSS

    Bootstrap css, how to make always visible navbar-toggle?

    CSS: How to change background color [closed]

    How do I make an image act as a video overlay?

    How to horizontally center a link element with CSS?

    How do I add colored corners to a background image?

    jqueryui dialog with table — how to limit row height

    How do i position this element relative to an image?

    How do I apply CSS rules from a local domain to content in an iFrame from another domain

    How to divide 3 divs(CSS + MVC)

    Show/hide css class by url parameter with php

    How can I wrap a page with a centered DIV?

    How can I correctly type css float?

    how to add background images using css in phonegap

    Coming from Android XML layouts, how to place web page elements in XHTML?

    How to use jQuery without making a mess? [closed]

    How can I prevent my layout from disrupting when a Javascript function runs?

    How to strach div in some line to “all left space” with css

    How to make element slide down from display:none?

    how do I use standard GWT CSS style themes from non-GWT pages?

    How can I create an addin in Visual Studio to generate javascript, CSS and other code from a settings file

    How to break a table with CSS diagonally or vertically?

    How to position CSS Ribbon to go over one table cell

    How to hide and fade div using jquery and css

    CSS / Jquery How to auto-size containers and images

    How do I make a hover over only take up a portion of an image as seen on gamlinwhiskeyhouse.com? [closed]