how to hide "image not found" icon on IE and chrome using CSS

Question

I have some images on my page.

By default if a given image is not available, then the broken image indicator is shown on Chrome and IE.

I want nothing to be shown but the alternative text in this case. Is there any way to handle it using CSS.

http://stackoverflow.com/questions/3235913/how-to-silently-hide-image-not-found-icon-when-src-source-image-is-not-found — Xareyo, Aug 28 '13 at 10:08

Davor Mlinaric · Answer 1 · 2014-01-29T08:10:09.210

13

using javascript

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

edit: added small snipet that will handle all images.

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

edited Jan 29 '14 at 08:10

answered Aug 28 '13 at 10:01

Davor Mlinaric

3

This is ok for an example, but if the OP is doing this for a lot of images, the JS should _not_ be inline – Bojangles Aug 28 '13 at 10:02

score 4 · Answer 2 · edited Aug 28 '13 at 10:02

4

Try setting alt=" " as an empty string, If the image isn't found, there will just be an empty space.

edited Aug 28 '13 at 10:02

Bojangles

answered Aug 28 '13 at 10:00

Vladimir

2

Chrome doesn't hide icons of broken images though, where OP wants to hide those icons – Mr. Alien Aug 28 '13 at 10:09
1

Thank you for your reply. On IE also broken image appears and i want it to do it using CSS not JS, if any option is available please help. – shi69 Aug 29 '13 at 06:02

score 1 · Answer 3 · answered Aug 28 '13 at 10:01

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";
}

or use

var images=document.getElementsByTagName("img");
for(i=0;img[i]!=null;i++)
{
img[i].style.display = "none";
}

score 1 · Answer 4 · answered Jul 28 '16 at 09:22

Instead of using JavaScript or CSS, you can use the object tag. It's cleaner and easier code. Add alternative text between the tags like this:

<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>

4 Answers4