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.
š Neural Networks from Scratch - Presale
I'm writing a book about the timeless foundational concepts of neural networks for JavaScript developers. Go from if-else to weights and biases by building tiny AI models from scratch!
š Neural Networks from Scratch - Presale
I'm writing a book about the timeless foundational concepts of neural networks for JavaScript developers. Go from if-else to weights and biases by building tiny AI models from scratch!