Catch missing image assets inside image tag

Posted on Edited on In

If an image is being displayed on a website and for some reason that asset disappears, you can catch that error and display a placeholder image with a little inline js.

Here is an example:

<img src="/marketing/importantImage.png"
    onerror=" this.onerror = null; this.src='/marketing/backupimage.png';"
/>

This will help prevent image 404’s on the site if someone decides to go and delete a bunch of images. Since is just a little js snippet, you can change the class, report the error or even remove the element entirely.