html Image Placeholder



Image Placeholder

I have defined the image tag with a background color so that if there is no image the color should show but still the broken image icon is showing how to remove that ?

I dont want to make the page bulky by adding jquery or any framework , also i cant add any kind of divs to images because the site is almost done.

Found the answer with only javascript

function ImgError(source){
source.src = "/images/noimage.gif";
source.onerror = "";
return true;

<img src="someimage.png" onerror="ImgError(this);"/>

you can hide that using following:


you can display another image if image not found as follow:

<img src="my.png" onerror="this.src = 'image-not-found.png';" />
share|improve this answer
I'd suggest visibility:hidden instead of display:none if you don't want it to affect layout. Also, note my point about wrapping it in a div if you need to have a background color display when the image doesn't load. – Nick Lockwood Jan 24 '12 at 13:19
@NickLockwood ya thats also a way –  Hemant Metalia Jan 24 '12 at 13:20
i cant add anything manually to the image tags there are many tags all around the site . – Pradyumna Sharma Jan 24 '12 at 13:21
@PradyumnaSharma you can add attributes dynamically –  Hemant Metalia Jan 24 '12 at 13:28
Sweet solution, I'm into into coding web applications for years but didn't knew of the onerror-attribute. Thanks! –  acme Feb 22 '12 at 14:37

想对作者说点什么? 我来说一句