B2B Marketing Insights by Ironpaper

Hide broken images using javascript

Written by Ironpaper | May 15, 2011

As part of our web design tips and tactics guide, here is a sometimes useful javascript technique of hiding broken images and their ALT text. This can be useful ( as a quick, temporary fix) when pulling from another source such as a dynamic array or a database output which may have a few broken paths. This can also be used as a bulletproofing technique for interface design as a temporary solution when dealing with tricky image sources.

<img src="#" alt="I WANT TO HIDE THIS WHEN THE IMAGE IS BROKEN" onerror="this.style.display='none'">

Here is the snippet:

onerror="this.style.display='none'"

The onerror event is supported in all major browsers.

Ironpaper, Webintel:
SUBJECT: web design guide