How to Handle Broken Images

If your website is displaying many images and some of their are from different sources, eventually you will run into a situation when some of the images no longer exists. They are either move to different path or got deleted altogether.

This is what you will start seeing something like below in your website.

This is very annoying to users and it needs to be fixed on topmost priority.

Here are some of the ways to fix broken images.

Remove img tag itself.

This is the simplest and most effective way of doing it.

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

Another way of doing same thing

<img src="Error.src" onerror="this.parentNode.removeChild(this);">

This will remove img tag itself and user will never know if any image was to be displayed here, Only issue being, if you have referred image in your content, user might get confused.

Display Backup Image

Implementing this is also very easy but for various reasons I dont link this option.

<img src="Error.src" onerror="this.src='http://example.com/existent-image.jpg'"/>

This option remove awkwardness looking broken image picture, however it will be replace it will backup image. Humanly it’s not possible to set up back up image for each image so mostly, there will be one backup image for all images. This reduces the awkwardness of broken image but it replaces it with backup image. This highlights the broken image issue and if image is referred in content, it does not help user with anything.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.