1

I am trying to change srcset to a default image if it doesn't exist.

If it's a window below 465px the img line works to the default if the Small.jpg doesn't exist. I just can't get the srcset to change if the image doesn't exist. Any ideas? Thanks

<picture>
  <source media="(min-width: 650px)" srcset="Large.jpg" onError="this.onerror=null;this.srcset='Default.jpg';">
  <source media="(min-width: 465px)" srcset="Medium1.jpg" onError="this.onerror=null;this.srcset='Default.jpg';">
  <img src="Small.jpg" alt="Flowers" style="width:auto;" onError="this.onerror=null;this.src='Default.jpg'">
</picture>
Tom
  • 1,447
  • 1
  • 12
  • 26
Ched
  • 13
  • 3
  • Does this answer your question? [How does one use the onerror attribute of an img element](https://stackoverflow.com/questions/8124866/how-does-one-use-the-onerror-attribute-of-an-img-element) – mas-designs Feb 19 '20 at 18:14

2 Answers2

1

Welcome to Stack Overflow.

There is something odd going on. If you go here and change the code to this

<picture>
  <source media="(min-width: 6000px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 6000px)" srcset="img_white_flower.jpg">
  <img src="img_orage_flowers.jpg" alt="Flowers" style="width:auto;" onerror="console.log(this.src); this.src = 'img_orange_flowers.jpg'; console.log(this.src);">
</picture>

You will see that the picture element bypasses the sources, as the min-width filters them out, errors out on the typo in the img src and corrects its own source. You can see it happening in the console.

Same thing works with srcset

<picture>
  <source media="(min-width: 6000px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 6000px)" srcset="img_white_flower.jpg">
  <img src="img_orage_flowers.jpg" alt="Flowers" style="width:auto;" onerror="console.log(this.srcset); this.srcset = 'img_orange_flowers.jpg'; console.log(this.srcset);">
</picture>

So maybe I'm not understanding but the onerror function for the image seems to be working OK.

If you are actually looking for an onerror handler for the picture element, so that you can handle the case where the picture element is given a non-existent image in the srcset of the first source element, then I believe there's no such handler.

Tom
  • 1,447
  • 1
  • 12
  • 26
  • Thanks very much for the response. – Ched Feb 19 '20 at 22:24
  • Thanks very much for the response. The problem is if the appropriately sized image in the srcset doesn't exist, then I wanted was to use 'Default.jpg'. In your first example change the 1st srcset image to img_pink_flowers_NEW.jpg. When page is over 650px an image isn't shown! I wanted 'Default.jpg' shown. Tanks for your help. – Ched Feb 19 '20 at 22:35
  • OK got it. At the moment there is no way of getting into the internals of how the browser chooses the source or image from a element. What you're looking for is a onError handler, which is not something that exists I believe. – Tom Feb 19 '20 at 22:55
  • Thanks very much for telling me that there is no onError handler for picture element. I will look at an alternate. You have saved me another day's frustration. – Ched Feb 20 '20 at 00:08
  • OK. I've edited the question to make the topic clearer and put that in the answer so please accept it so others can find it later. – Tom Feb 20 '20 at 11:38
1

In case the image of a source tag does not exist, its onerror won't be called, but the onerror of the img tag is called. So you can do this to change the image in case a source tag has a path to an image that might not exists:

<picture>
  <source srcset="img.svg" type="image/avif" />
  <source srcset="img2.webp" type="image/webp" />
  <img src="img2.webp" onerror="handleImgError(event, 'img2.webp')" />
</picture>


<script>
window.handleImgError = function handleImgError(e, path) {
 e.target.onerror = null;
 Array.from(e.target.parentNode.children).forEach(element => {
 element.srcset = path
 })
 e.target.src = path
}
</script>

Tested and it works in 6/7/2023 on chrome

Gabriel Beauchemin-Dauphinais
  • 181
  • 2
  • 14