html中加载图片失败,图片加载失败如何用默认图片代替

背景：图片资源加载不出来时用默认图片替换

解决方法：

一，用js方法onerror：  1，直接在html标签中使用

复制代码  2，原生js方法：

document.getElementById('#img').onerror = function(){

this.src = "images/errorLogo.png";

}复制代码  3，jquery封装后的error方法：

$('img').error(function(){

$(this).attr('src',"images/errorLogo.png");

})复制代码

以上方法若默认图片加载失败，也会变成死循环，可使用如下方法解决：

$("img").one("error", function(){

$(this).attr("src", "images/default.png");

});复制代码

或将onerror封装在函数里面，加载onerror后重置为null，如下所示：

function noImg(){

var img=event.srcElement;

img.src="images/errorLogo.png";

img.οnerrοr=null;

}

复制代码

二，不支持onerror时，利用css3的background设置多背景图片

background-image：url("images/logo.png"),url("images/errorLogo.png");复制代码

用这种方式第一张图会显示在第二张图片上面，前面url加载不成功直接图片不显示，将直接显示后面默认的图片资源，想要img单张的效果还需添加如下属性，并给定宽高

background-repeat: no-repeat;

background-size: cover;复制代码

这种方式的问题：两张图片都加载成功的情况下，第一张图片若有部分透明，会看到第二张图片。

详情可以查看多背景图像的使用方法：