How to stop broken images showing

Question

I have a table with some images that I want to start out with no images in them.I have set the src=\"\".But when viewed in a browser it shows broken image pics.

Answer 1

The src attribute is required to point to an image; if you have no image, don't use the img element.

You could use any other element and set the background-image property if required.

Answer 2

I’d suggest using CSS to hide the image tags initially:

<img src="" style="visibility: hidden;">

Then amend that from your JavaScript when you add the image URL:

yourImgObject.src = 'IMAGEURL';
yourImgObject.style.visibility = 'visible'

Answer 3

That's not really an answer to your question, but for completeness' sake: One can remove the image on a loading error (e.g. with an inline script).

<img src="broken.png" onerror="this.parentNode.removeChild(this)">

Answer 4

Don't use images that point to nothing.

You could style them to have no visibility (will not work if you have anything in the src attribute, even if it is a bad URL):

img[src=''] 
{
  display: none;
}

But as I already said, if you don't have an image do display, don't put the tag on the page.

Answer 5

If you just want to get rid of broken image icon & don't want to hide the image and want to keep the resolution of it as is; Use a transparent base-64 image, to replace it.

Jquery:

$("img").on("error", function() {
    $(this).attr('src' ,'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=');
});

Pros:

• No need to hide the image
• No need to change Alt text of the image
• base-64 image don't have specific height-width
• works with jquery zoom (jquery.zoom.js), if the zoomed image is broken

Answer 6

Add this inline event handler,

<img src="broken.png" onerror="this.style.display='none'" />