javascript - 加载错误时更改图片元素的 Srcset

Question

如果 srcset 不存在，我正在尝试将其更改为默认图像。

如果窗口低于 465px，则如果 Small.jpg 不存在，则 img 行将使用默认值。如果图像不存在，我就无法更改 srcset。有任何想法吗？谢谢

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

Answer 1

欢迎来到 Stack Overflow。

发生了一些奇怪的事情。如果你去here并将代码更改为这样

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

您将看到图片元素绕过源，因为最小宽度将它们过滤掉，在 img src 中的拼写错误上出错并更正其自己的源。您可以在控制台中看到它发生。

同样的事情也适用于 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>

所以也许我不明白，但图像的 onerror 函数似乎工作正常。

如果您实际上正在寻找图片元素的 onerror 处理程序，以便可以处理在第一个源元素的 srcset 中为图片元素提供不存在的图像的情况，那么我相信没有这样的处理程序处理程序。