CODEWITHSUNDEEP
htmlimagefallback
andyts93
andyts93

Reputation: 347

Fallback image if image is not found in picture source tag

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

Upvotes: 6

Views: 10502

Answers (4)

Тимоха 64
Тимоха 64

Reputation: 1

Use the object tag

<object data="/broken-img1.png" type="image/png">
<img src="/normal-img1.png">
</object>
<object data="/broken-img2.png" type="image/png">
<img src="/normal-img2.png">
</object>

https://stackoverflow.com/a/29111371/24310483

https://stackoverflow.com/a/980910/24310483

Upvotes: -1

Velu S Gautam
Velu S Gautam

Reputation: 902

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

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>

Upvotes: 2

Amit Biswas
Amit Biswas

Reputation: 31

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>

Upvotes: 3

harshadk258
harshadk258

Reputation: 53

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?

Upvotes: 0

Related Questions