本文介绍如何利用 JavaScript 处理 img 标签的 onerror 事件，以解决图片因网络、文件或 URL 问题导致加载失败的情况。通过编写 errorImg 函数，在图片加载出错时自动替换为预设的默认图像，从而提升用户体验并避免显示破碎图标。
图片加载失败的背景与 onerror 事件机制
网站图片无法显示的原因多种多样，包括网络连接异常、源文件损坏或 URL 地址错误等。当图片加载失败时，浏览器会触发 onerror 事件。利用这一机制，我们可以有效避免图片加载失败带来的视觉尴尬。
JavaScript 错误处理函数实现
JavaScript 实现代码
具体代码实现如下：
// 处理图片加载出错的情况
function errorImg(img) {
img.src = "http://static.xuexiba.com/uploadfile//UserInfo/Avatar/201403/1303992393385832875324.jpg";
img.onerror = null;
} HTML 标签调用与页面效果
HTML 标记代码
具体 HTML 代码如下：
<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />页面显示效果
