CODEWITHSUNDEEP
javascripthtmlcss
MrHezi
MrHezi

Reputation: 123

Displaying some HTML for when an <img> can't be shown (instead of the image)

I happen to have a stylized image with a list inside it in some HTML page.

If the image cannot be shown, I want to have a normal HTML list instead of it (in a similar vein to an alt text, but with HTML tags and not just text).

Is there a best way to do that? (like a CSS rule or something?)

Thanks

Upvotes: 2

Views: 69

Answers (3)

Alohci
Alohci

Reputation: 82986

There is a standard way to do this without resorting to JavaScript. Use the object element instead of the img element. If the image can't be displayed, the content of the object element is used. So:

<p>When the image displays:</p>
<object data="https://via.placeholder.com/50" style="height:50px">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</object>
<p>When the image doesn't display:</p>
<object data="https://error.placeholder.com/50" style="height:50px">
  <ul>
    <li>list item 1</li>
    <li>list item 2</li>
 </ul>
</object>

Upvotes: 2

joeCEB
joeCEB

Reputation: 89

the list is overlaped by the image normaly. if the image has an error loading, it will become invisible.

not 100% sure if it will work though.

css:

img {
  z-index: 1;
  position: absolute;
  top:0px;
  left:0px;
}
ul {
  /*z-index: 0;*/
  position: absolute;
  top:0px;
  left:0px;
}

­html:

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
</ul>

<img src="image.jpg" onerror="document.querySelector('img').style.visibility = "hidden"">

you can style the list however you like.

Upvotes: 1

Spectric
Spectric

Reputation: 31992

You can listen for the error event, which fires when the resource can't be loaded:

function badImage(imageElement){
  imageElement.outerHTML = "This image can't be shown"
}
<img src="https://.com" onerror="badImage(this)">

Upvotes: 1

Related Questions