Checkout my CSS Grid By Example and Getting Started With React video courses on Skillshare. Sign up now and get one free month of Skillshare.

Fallback images in native html with img onerror

The img html tag comes with a lesser know attribute called onerror:

<img src="this_image_does_not_exist.png" onerror="myFunction()">

The onerror attribute maps to the event with the same name and executes a JavaScript function if an error occurs when loading an image.

This can be useful to provide a fallback alternative for when the image provided by src cannot be found:

  onerror="this.onerror=null; this.src=''"

Checkout the full codepen below:

All the major browsers support the onerror event.

And speaking of fallback options we can also set fallback images for background-image in CSS.

Home Screencasts Best of Newsletter Search X