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

<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