I am trying to deal with broken images to get a nice and clean result. What I want is:
- To get rig of the broken image icon.
- To be able to define my own default content, image or text, and style it.
I am using React, but I think this is related to HTML only. Also, I am currently using Chrome, but I'm looking for a result working on all main browsers.
I know I can use an img tag with onError method:
<img
src="wrongUrl"
onError={(e) => {
e.target.src = 'https://placeimg.com/200/300/animals';
}}
/>
This works great for images. But I want to understand how that can be done with an object tag.
Reading How to hide image broken Icon using only CSS/HTML (without js) I found out that there are two ways:
A. Using onError method:
<object
data="wrongUrl"
type="image/jpg"
onError={(e) => {
e.target.src = "https://placeimg.com/200/300/animals";
}}
/>
B. Wrapping a default element within our object tag:
<object
data="wrongUrl"
type="image/jpg"
>
<img src="wrongUrl" />
</object>
But in both cases, there are some situations when a #document element is inserted inside the object, like this:
<object data="wrongUrl" type="image/jpg">
#document
<!doctype html>
<html>…</html>
<img src="https://placeimg.com/200/300/animals">
</object>
This #document element is in fact the document element of my page, so it is inserted inside object tag as a default content.
I would like to understand how #document element is inserted here, and why it is conflicting with my default element.