2 ppsilence ppSilence 于 2017.09.04 10:36 提问

css背景图不存在时,怎么处理浏览器抛出的404错误

如果图片加载失败,浏览器会抛出404错误,怎么处理这种问题。

var imgObj = new Image();
imgObj.src = imgURL;
imgObj.onerror = function (){
    console.log("404");
        $('body').css('background', 'url('+ 默认图片 +')repeat-x #fff');
};
imgObj.onload = function (){
    $('body').css('background', 'url('+ imgURL+')repeat-x #fff');
};

图片说明

9个回答

qq_26433213
qq_26433213   2017.09.04 10:55
已采纳

脚本没有问题,你确定资源加载到了吗,或者是你没有引用jquery

图片说明

qq_39546561
qq_39546561 莫名其妙不能评论了,资源加载不到,当这个图片不存在的时候会设置另一张图片为背景图,这个时候会报错,我更新了问题您看一下
3 个月之前 回复
b100522
b100522   2017.09.04 11:05
imgObj.onerror = function (){
    //console.log("404");
        imgObj.onerror="xxxxx";//写个默认图片地址
};
qq_26433213
qq_26433213   2017.09.04 10:39

404是应为服务器找不到资源,应该是路径错了1
'url('+ imgURL+')repeat-x #fff' 这个路径在检查一遍

qq_26433213
qq_26433213 回复ppSilence: imgObj.onerror = function (){ console.log("404"); };报错是自己报的,你可以在这里做一些其它的处理啊,比如弹出窗口告诉用户背景图不存在,请重新设置等等,这个就要看具体的业务场景了
3 个月之前 回复
ppSilence
ppSilence 谢谢回答,问题是图片加载成功的时候不会报错,加载失败的时候输出404并报错,这时候怎么解决呢
3 个月之前 回复
qq_38005982
qq_38005982   2017.09.04 10:41

你先把css的这个路径加到alert里看一下,把css这个删除了,如果是你这路径错误,你看弹窗就能看到,不然这个路径存在你看不了弹窗

ppSilence
ppSilence 检查了路径是没有问题的,图片加载失败的时候onerror 事件会向浏览器报错
3 个月之前 回复
qq_37552993
qq_37552993   2017.09.04 11:48

1、让这个图片元素隐藏:
[html] view plain copy
图片XX

2、用默认的图片替换:
[html] view plain copy
图片XX

qq_37552993
qq_37552993   2017.09.04 11:49

1、让这个图片元素隐藏:

图片XX

2、用默认的图片替换:

图片XX

qq_37552993
qq_37552993   2017.09.04 11:51

这样可以处理
1、让这个图片元素隐藏:
img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>

2、用默认的图片替换:
img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/> :

ppSilence
ppSilence 不可以,我需要写在css里的
3 个月之前 回复
adu123_
adu123_   2017.09.04 16:23

加载失败的时候报404错
是你的路径有问题

HUSHILIN001
HUSHILIN001   2017.09.05 08:45

首先,如果你是故意。知道他会包404的,那个我感觉你应该用onerror方法,如果你是不是故意的,那么你需要很仔细的检擦下路径

HUSHILIN001
HUSHILIN001 回复ppSilence:抱歉,没看好题,如果不想让控制台打印404,我不清楚,因为外部图片,肯定是http请求,所以感觉你要在http下手
3 个月之前 回复
HUSHILIN001
HUSHILIN001 回复ppSilence: 你是那种对img标签的还是用h5的定义一个image属性?如果是属性,可以直接用onerror试试,img的话我就不清楚了
3 个月之前 回复
ppSilence
ppSilence 是故意报错的,但是这个错误能不能处理,不想让控制台显示404.
3 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片