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 ca...
For further actions, you may consider blocking this person and/or reporting abuse
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.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)
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.
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.
Exactly, trust me I tried it and it can crash Chrome 😂
Ah good second point, thanks for that 💖
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 ...
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.
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.
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/
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!
Thanks for sharing the article!
Happy to see you enjoyed it.
An awesome article I did not know about that fallback.
Nice, glad you learned something new today 🙏
Thanks so much for this Chris, I didn't know something like this exists, I'll definitely be using this in my next application.
Don't mean to be a buzzkill, but according to caniuse.com, the onerror attribute is deprecated.
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
How do I Set a Default Fallback Image for WordPress Thumbnails ? رجوع الحبيب بالصورة
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...
What is issue in this link ?
I don't quite get why it's there.
I'm using this to update some big old jpegs to smaller webP files, with the old jpeg as the onerror fallback.
Is this actually going to save overhead on pageload, or does the browser need to load both the new webP file and the fallback jpeg anyway?