为触发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', '替换图片地址');
}