Javascript 加载时更改图片元素集错误

我正在尝试将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>

---

欢迎来到堆栈溢出

发生了一些奇怪的事情。如果你去把代码改成这个

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

您将看到picture元素绕过了源，因为minwidth过滤掉了它们，在imgsrc中排除了输入错误，并更正了它自己的源。您可以在控制台中看到它的发生

同样的事情也适用于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函数似乎工作正常

---

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

欢迎使用Stack Overflow

发生了一些奇怪的事情。如果你去把代码改成这个

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

您将看到picture元素绕过了源，因为minwidth过滤掉了它们，在imgsrc中排除了输入错误，并更正了它自己的源。您可以在控制台中看到它的发生

同样的事情也适用于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函数似乎工作正常

---

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

这是否回答了您的问题？这回答了你的问题吗？非常感谢你的回复。问题是，如果srcset中不存在大小合适的图像，那么我希望使用'Default.jpg'。在第一个示例中，将第一个srcset图像更改为img_pink_flowers_NEW.jpg。当页面超过650px时，图像不会显示！我想要显示'Default.jpg'。谢谢你的帮助，明白了。目前还无法深入了解浏览器如何从元素中选择源或图像。你要找的是一个OneError处理器，我相信它并不存在。非常感谢你告诉我，图片元素没有OneError处理器。我会找一个替补的。你救了我一天的挫折。我对问题进行了编辑，以使主题更清晰，并将其放在答案中，因此请接受它，以便其他人稍后可以找到它。非常感谢您的回复。非常感谢您的回复。问题是，如果srcset中不存在大小合适的图像，那么我希望使用'Default.jpg'。在第一个示例中，将第一个srcset图像更改为img_pink_flowers_NEW.jpg。当页面超过650px时，图像不会显示！我想要显示'Default.jpg'。谢谢你的帮助，明白了。目前还无法深入了解浏览器如何从元素中选择源或图像。你要找的是一个OneError处理器，我相信它并不存在。非常感谢你告诉我，图片元素没有OneError处理器。我会找一个替补的。你救了我一天的挫折。我对问题进行了编辑，以使主题更清晰，并将其放在答案中，因此请接受它，以便其他人稍后可以找到它。