在前端开发中，我们经常需要显示图片。然而，有时候我们可能无法加载或找到原始图片，这时候就需要显示一个备用的交替图像。
为什么会出现找不到源图像的问题？
常见情况包括：
- 图片路径错误
- 原始图片已被删除或移动
- 网络连接问题
如何显示交替图像？
我们可以使用 onerror 事件来处理找不到源图像的情况。当浏览器尝试加载一张图片但失败时，它会触发 onerror 事件，此时我们可以将该图片替换为备用的交替图像。
下面是一种简单的实现方式：
---- ------------------------ -----------------------------------------
这段代码将会先尝试加载 original-image.png，如果加载失败，则会将图片替换为 alternate-image.png。
IE下的问题
在 Internet Explorer 中， onerror 事件只在图片元素的 src 属性设置后才能生效。也就是说，如果在页面加载完成之前设置了 src 属性，则 onerror 事件将无法生效。
解决方法是在页面加载完成后再设置 src 属性。例如，在使用 jQuery 的情况下，我们可以这样实现：
---- --------------
------------ -
-------------------------- --------------------------------- ---------- -
------------------- -----------------------
---
---这段代码将会在页面加载完成后，先尝试加载 original-image.png。如果加载失败，则会将图片替换为 alternate-image.png。
Mozilla下的问题
在 Firefox 中，如果备用图像也无法加载，则会出现替代文本（alt text）。为了避免这种情况，我们可以使用一个空白图片作为备用图像，并设置其尺寸为0x0像素。
---- ------------------------ ------------------------------ ------------- ----------------
总结
通过使用 onerror 事件，我们可以在找不到源图像时显示备用的交替图像。要注意不同浏览器的差异性，以确保代码可以在所有浏览器中正常工作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/11500