Fallback image if image is not found in picture source tag

Question

How can I add a fallback image if the image specified in the source tag is missing? For example

<picture>
  <source srcset="image.webp 1x, image@2x.webp 2x" type="image/webp">
  <img srcset="image.jpg 1x, image@2x.jpg 2x" src="image.jpg" onerror="this.onerror=null;this.srcset='not-found.jpg 1x, not-found@2x.jpg 2x'">
</picture>

If image.webp is missing, how can I show a fallback image? Putting onerror="this.src='fallback.jpg'" on the img tag works if the browser doesn't support webp images, but same If I put that code on the source tag doesn't work

EDIT

Updated the code, it now works on browser which doesn't support webp images (safari) but I'm still not able to show a not-found.webp images for other browsers

Does this answer your question? [Inputting a default image in case the src attribute of an html is not valid?](https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-attribute-of-an-html-img-is-not-vali) — Devinloper, Dec 17 '19 at 09:49
@Devinloper nope, it doesn't use the `picture` tag but a single `object` tag — andyts93, Dec 17 '19 at 10:34

score 3 · Answer 1 · answered Aug 21 '21 at 15:35

Can we bring the image URL from WordPress shortcode?

<script>
function onError() {
  this.onerror = null;
  this.parentNode.children[0].srcset = this.parentNode.children[1].srcset = this.src;
}
</script>

<picture>
   <source srcset="[ifsoDKI type="querystring" parameter="profile__img" />
   <source srcset="[ifsoDKI type="querystring" parameter="profile__img" />

   <img src="https://www.animationvideo.co/wp-content/uploads/2017/07/A-V.png" alt="logo" onerror="onError.call(this)" />
</picture>

Velu S Gautam · Answer 2 · 2020-10-19T06:36:05.977

1st Picture tag : Success case where webp is successfully loaded without any fallback case

2nd Picture tag: Failed to load webp (404) then fallback and load the jpg image

Full artile in hectane.com

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Image Fallback</title>
  <script>
    function onError() {
      this.onerror = null;
      this.parentNode.children[0].srcset = this.parentNode.children[1].srcset = this.src;
    }
  </script>
</head>

<body>
<!-- Success condition webp is avalibale and onerror is not called-->
  <picture>
    <source srcset="
         https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.webp
        " type="image/webp" />
    <source srcset="
          https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.png
        " type="image/png" />
    <img src="https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.jpg" alt="success" onerror="onError.call(this)" />
  </picture>
  <picture>
   <source srcset="
         https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing1.webp
        " type="image/webp" />
    <source srcset="
          https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.webp
        " type="image/png" />
    <img src="https://assets.hectane.com/fallback-image-if-image-not-found-in-picture-source-tag/listing.jpg" alt="fall back jpg called" onerror="onError.call(this)" />
  </picture>
</body>

</html>

I'm using this to solve infinite loop when my webp is getting 404. — zhuhang.jasper, May 12 '21 at 04:40
What i do instead of changing srcset, is to remove the webp source. Using `this.parentNode.children[0].remove();` — zhuhang.jasper, May 12 '21 at 04:49

score 0 · Answer 3 · answered Dec 17 '19 at 10:40

First of all, the attribute src used for source tag under picture element is wrong. The source tag has srcset attribute to accept the image path.

<picture>
  <source srcset="/path/to/image1.webp" type="image/webp">
  <source srcset="/path/to/image1.jpg" type="image/jpeg">

  <img src="/path/to/fallbackImage1.jpg">
</picture>

Secondly, you're not treating the fallback img tag correctly as per the documentation.

The HTML element contains zero or more elements and one element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child element and choose the best match among them. If no matches are found—or the browser doesn't support the element—the URL of the element's src attribute is selected. The selected image is then presented in the space occupied by the element.

The img tag used inside picture element works only when the browser compatibility issue triggers.

You need to achieve this via other workaround script, as default mechanism won't fulfill the needful.

Also, could you elaborate your exact requirement of using picture element?

My bad, the example was different from my actual code (I was using the srcset tag properly). I've update the question with my new code. I'm using the picture element beacuse I have to use webp images where possibile and jpg images in the other cases — andyts93, Dec 17 '19 at 11:46
@andyts93 Thank you for the clarification and appropriate edit in the question. However, the thing that you're trying to do with onerror works on and not on and it's . To my knowledge, you can't expect "not-found.webp" image to load when the image is not present at the path you mentioned for srcset of source tag of picture element. — harshadk258, Dec 18 '19 at 11:56

Fallback image if image is not found in picture source tag

3 Answers3