DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for HTML fallback images on error
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

HTML fallback images on error

The other day I encountered some issues with images for external sources not loading.

I saved a link to someone's Twitter profile image in this case. When the user changes this image, it doesn't auto reflect the new one.

So I decided to look into fallback images.
And it's surprisingly easy.

What we want to achieve:

  • Load the image
  • If it doesn't load, show the fallback

Note: Alternatively, you could decide to remove the image

HTML on error fallback images

Let's set up a sample HTML experiment.

<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-163822.jpeg"
/>
Enter fullscreen mode Exit fullscreen mode

This will load an Photo by Pixabay from Pexels (a stock image site).

This will work perfectly, but now let's try and destroy it by randomly adding some numbers to the image.

<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
/>
Enter fullscreen mode Exit fullscreen mode

With this, we get the super annoying broken image.

Broken image

So what can we do when this happens?
We can use the onerror attribute on the image to set a fallback.

It works like this:

<img
  src="https://images.pexels.com/photos/163822/color-umbrella-red-yellow-00000.jpeg"
  onerror="this.onerror=null; this.src='https://images.pexels.com/photos/159868/lost-cat-tree-sign-fun-159868.jpeg'"
/>
Enter fullscreen mode Exit fullscreen mode

We use the onerror to set the error to null and set the src of the image to a fallback.
In our case, a photo of a missing cat.

Note: It's not a great practice to rely on external images. You ideally want to have the fallback image locally in the file system, so it's a reliable fallback.

You can see it in action in the following CodePen.
The first image loads, and the second one is broken.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Top comments (21)

Collapse
baenencalin profile image
Calin Baenen

A good idea would be to use a data: protocol image, allowing for the raw data to be provided and to make sure the image exists.

Collapse
dailydevtips1 profile image
Chris Bongers Author

For the fallback you mean?
If the image is small a good option, if it's rather big I think you might end up with some load issues. (this is an assumption haven't tried it)

Collapse
baenencalin profile image
Calin Baenen

Yes, for the fallback, since using a path might fail for similar reason to the image you attempted to load.

I've gotten pretty far with large images, but this may differ based on OS, hardware speed, browser, and image quality.

Collapse
amabdev profile image
AmabDev • Edited on

Note: It's not a great practice to rely on external images. You ideally want to have the fallback image locally in the file system, so it's a reliable fallback.

Definitely true. Otherwise we will enter an infinite loop because the onerror will be called again and again.

Also we probably want to display an better looking broken image placeholder for accessibility reasons. The fallback should show that this is not the intended image at first sight.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Exactly, trust me I tried it and it can crash Chrome ๐Ÿ˜‚

Ah good second point, thanks for that ๐Ÿ’–

Collapse
leob profile image
leob

Amazing that something like this is even possible, who would have thought ... the native Web APIs keep expanding, but my impression is that most of these new capabilities tend to get ignored in favor of using React and other frameworks, which we then use to "emulate" what can be done simply with native Web APIs ...

Collapse
dailydevtips1 profile image
Chris Bongers Author

Oh yes,
And then underwater heavily rely on these native web apis ๐Ÿ˜‚

That's why I personally like to see a rise of native web frameworks (like remix/asto/fresh) they are just leveraging these API's in the most native ways.

And this comes from someone who uses React in his day job.

Collapse
leob profile image
leob

Remix is interesting, you wrote a series of articles on it, I enjoyed that ... but yeah, frameworks like React in fact exist because the native web falls short as an application development platform - however, this is increasingly less the case ... I wonder if there will be a day when we'll just use native APIs and Web Components, and frameworks are indeed not needed anymore.

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

Yep, really enjoy working with Remix (and Astro for that matter).
I actually hope we get to that point one day, where it's just web components.

Imagine how cool it would be to simply share pre-made things across projects.
I do guess there are quite a few already: webcomponents.org/

Collapse
yuridevat profile image
๐•๐•ฆ๐•๐•š๐•’ ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป

Thank you for another great article, Chris. I did not know about this fallback.

Also, thank you @amabdev for the suggestion for accessibility reasons!

I learned something great today!

Collapse
kievandres profile image
Kiev Andres

Thanks for sharing the article!

Collapse
dailydevtips1 profile image
Chris Bongers Author

Happy to see you enjoyed it.

Collapse
andrewbaisden profile image
Andrew Baisden

An awesome article I did not know about that fallback.

Collapse
dailydevtips1 profile image
Chris Bongers Author

Nice, glad you learned something new today ๐Ÿ™

Collapse
osalumense profile image
Akugbe Stephen

Thanks so much for this Chris, I didn't know something like this exists, I'll definitely be using this in my next application.

Collapse
wonderchuck profile image
Adam Stankus

Don't mean to be a buzzkill, but according to caniuse.com, the onerror attribute is deprecated.

Collapse
dailydevtips1 profile image
Chris Bongers Author

I don't think that's correct Adam.

I mean it does show there, but it seems someone made a mistake on MDN (which is where caniuse pulls the info from).

This is already refactored a long time ago, but caniuse seems off still.

github.com/mdn/sprints/issues/4014

Collapse
teresitaleir profile image
TeresitaLeir

How do I Set a Default Fallback Image for WordPress Thumbnails ? ุฑุฌูˆุน ุงู„ุญุจูŠุจ ุจุงู„ุตูˆุฑุฉ

Collapse
dailydevtips1 profile image
Chris Bongers Author

Why is there a link attached to your comment? ๐Ÿ˜…
In regards to the question, this article describes it best: wpbeginner.com/wp-themes/how-to-se...

Collapse
teresitaleir profile image
TeresitaLeir

What is issue in this link ?

Thread Thread
dailydevtips1 profile image
Chris Bongers Author

I don't quite get why it's there.

๐ŸŒš Life is too short to browse without dark mode