6

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, [email protected] 2x" type="image/webp">
  <img srcset="image.jpg 1x, [email protected] 2x" src="image.jpg" onerror="this.onerror=null;this.srcset='not-found.jpg 1x, [email protected] 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

2

3 Answers 3

3

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>
2

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

enter image description here

<!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>

2
  • I'm using this to solve infinite loop when my webp is getting 404. May 12, 2021 at 4:40
  • 1
    What i do instead of changing srcset, is to remove the webp source. Using this.parentNode.children[0].remove(); May 12, 2021 at 4:49
0

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?

2
  • 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, 2019 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 <img> and not on <picture> and it's <source>. 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. Dec 18, 2019 at 11:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.