如果找不到源图像，如何显示交替图像？

在前端开发中，我们经常需要显示图片。然而，有时候我们可能无法加载或找到原始图片，这时候就需要显示一个备用的交替图像。

为什么会出现找不到源图像的问题？

常见情况包括：

• 图片路径错误
• 原始图片已被删除或移动
• 网络连接问题

如何显示交替图像？

我们可以使用 onerror 事件来处理找不到源图像的情况。当浏览器尝试加载一张图片但失败时，它会触发 onerror 事件，此时我们可以将该图片替换为备用的交替图像。

下面是一种简单的实现方式：

<img src="original-image.png" onerror="this.src='alternate-image.png'">

这段代码将会先尝试加载 original-image.png，如果加载失败，则会将图片替换为 alternate-image.png。

IE下的问题

在 Internet Explorer 中， onerror 事件只在图片元素的 src 属性设置后才能生效。也就是说，如果在页面加载完成之前设置了 src 属性，则 onerror 事件将无法生效。

解决方法是在页面加载完成后再设置 src 属性。例如，在使用 jQuery 的情况下，我们可以这样实现：

<img id="my-image">

$(function() {
  $('#my-image').attr('src', 'original-image.png').on('error', function() {
    $(this).attr('src', 'alternate-image.png');
  });
});

这段代码将会在页面加载完成后，先尝试加载 original-image.png。如果加载失败，则会将图片替换为 alternate-image.png。

Mozilla下的问题

在 Firefox 中，如果备用图像也无法加载，则会出现替代文本（alt text）。为了避免这种情况，我们可以使用一个空白图片作为备用图像，并设置其尺寸为0x0像素。

<img src="original-image.png" onerror="this.src='blank.png'; this.width=0; this.height=0;">

总结

通过使用 onerror 事件，我们可以在找不到源图像时显示备用的交替图像。要注意不同浏览器的差异性，以确保代码可以在所有浏览器中正常工作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11500