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

是的，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'，如果再次触发，则更改为pool.apply。

Answer 2

<picture>
    <source media="(min-width: 1200px)" srcset="https://image.ibb.co/jqzDOe/111.jpg">
    <source media="(min-width: 992px)" srcset="https://preview.ibb.co/bv5HGz/canstockphoto7233482.jpg">
    <img src="https://image.ibb.co/kg3hie/consultant2.jpg" alt="Red 1">
</picture>

如何处理HTML5图片标记中的未找到图片错误

2 个答案: