Fallback images in native html with img onerror

DanielNovember 15, 2022January 10, 2023

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:

<img
  src="this_image_does_not_exist.png"
  onerror="this.onerror=null; this.src='https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Image_not_available.png/800px-Image_not_available.png'"
/>

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.