html Image Placeholder

想给我的img标签增加一个占位符

问谷歌，

Image Placeholder

6 down vote favorite 2

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: <img src="my.png" onerror="this.style.display='none'" /> 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 answered  Jan 24 '12 at 13:17 Hemant Metalia 6,267 2 20 48

1   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 1   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