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?

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

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.

I've slightly modified the solution suggested by Gary Willoughby, because it briefly shows the broken image icon. My solution:

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

In my solution image is hidden initially and is shown only when it is successfully loaded. It has a disadvantage: users will not see halfloaded images. And if user has disabled JS then they will never see any images

To hide every image error, just add this JavaScript at the bottom of your page (just before the closing body tag):

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

It may be little late to answer, but here is my attempt. When I faced the same issue I fixed it by using a div of the size of image & setting background-image to this div. If the image is not found, the div is rendered transparent, so its all done silently without java-script code.

Doing a quick research on Andy E's answer, its not possible to live() bind error.

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

So you have to go like

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

directly binding the error event handler on creating a new element.

i've found a nifty method to do exactly this, while being still functional when using ng-src directive in Angular.js and like...

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

it's basically a shortest transparent GIF (as seen 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 )

of course this gif could be kept inside some global variable so it won't mess up the templates.

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

and use

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

etc.

Just simply add blank alt attribute on your <img>

Something like this: <img src="..." alt="">

Just Use simple 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;
}