图片加载失败处理

bonnie2012lai

于 2016-11-24 19:43:02 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS CSS

本文链接：https://blog.csdn.net/bonnie2012lai/article/details/53324776

CSS 同时被 2 个专栏收录

3 篇文章

订阅专栏

1 篇文章

订阅专栏

本文提供了两种处理图片加载失败的方法：一是使用 IMG 标签，二是使用 background-image 属性。对于 IMG 标签，可以通过 JavaScript 监听错误事件并替换为默认图片；对于 background-image，则可以直接设置备用图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片加载失败咋办呢？

需要给该图片替换为一张默认的背景图

1、情况1：IMG标签

e.g.:<img src="http://m.test.cn/test.png" onError="nofind();" >

function nofind(){
var img=event.srcElement;
img.src="../assets/images/news/news_loaderror.png";
img.onerror=null; //控制不要一直跳动
}

2、情况2：background-image

e.g.: <span style="position: relative;width: 4rem;height: 3.5rem;display: block;background-image: url('http://m.test.cn/test.png');background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;"></span>

改为：