如何处理 html5 图片标签中的图片未找到错误

Question

我正在尝试使用以下代码：

<picture>
    <source media="(min-width: 1200px)" srcset="https://example.com/images/abc.jpg?resize=169,169">
    <source media="(min-width: 992px)" srcset="https://example.com/images/cde.jpg?resize=132,132">
    <img src="index_files/red_1.jpg" alt="Red 1">
</picture>

我面临的问题是当 abc.jpg 或 cde.jpg 不可用时，它应该显示默认图像，例如 default.jpg 而不是 red_1.jpg 我在网站上提到了其他类似的主题，但我不知道如何在 html 的帮助下处理问题。

在那种情况下是否可以使用onerror，如果可以，在哪里以及如何使用？

Answer 1

<picture>
  <source srcSet="image.webp" type="image/webp" />
  <source srcSet="image.jpeg" type="image/jpeg" />
  <source srcSet="image.png" type="image/png" />
  <img srcSet="image.jpg" onError={(e) => {
    e.target.onerror = null;
    e.currentTarget.parentNode.children[0].srcset = e.target.src;
    e.currentTarget.parentNode.children[1].srcset = e.target.src;
    e.currentTarget.parentNode.children[2].srcset = e.target.src;
    e.currentTarget.parentNode.children[3].srcset = e.target.src;
  }} />
</picture>

Answer 2

是的，use the onerror event。然后，您可以简单地更改src 属性：

let image = document.querySelector('img');
image.onerror = function() {
  if (this.src === 'default1.png') this.src = 'default2.png';
  else if (this.src !== 'default2.png') this.src = 'default1.png';
}

这会将图像的src 从原来的任何内容更改为'default1.png'，然后，如果再次触发，则更改为'default2.png'。