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:

<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.

Home Screencasts Best of Newsletter Search X