时间戳

首页 > 解决方案 > 如何处理 html5 图片标签中的图片未找到错误

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

问题描述

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

<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可以使用，如果可以，在哪里以及如何使用？

标签： htmlimage

解决方案

是的，使用onerror事件。然后，您可以简单地更改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'。

推荐阅读