图片加载失败，显示默认图片

为触发error事件的<img>，替换一张默认图片。

描述

<img>图片加载失败时，会自动显示alt属性中的内容，且浏览器会自动为其添加样式。为保持各个浏览器中的效果一致，并提高用户体验，我们需要在图片加载失败时，为其替换一张默认图片（或进行其他操作）。

关键

利用error事件，替换原有的src地址。

效果

效果图

方法

<img src="原图片地址" alt="这是一张加载失败的图片"/>

法一：

若页面中图片较少，可直接在标签内书写。

<img src="原图片地址" alt="这是一张加载失败的图片" onerror="this.src='默认图片地址';this.onerror=null;"/>

法二：

此处默认使用了jQuery。

$('img').on('error', function(){
    $(this).unbind('error'); //防止替换图片加载失败后陷入无限循环
    $(this).attr('src', '替换图片地址');
}