JavaScript 实现图片加载失败时显示默认图像

图片加载失败的背景与 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 标记代码

 
<img width="32" height="32" src="1.jpg" onerror="errorImg(this)" />

页面显示效果