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.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.
📖 50 Javascript, React and NextJs Projects
Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.