圖片加載失敗如何用默認圖片代替

背景：圖片資源加載不出來時用默認圖片替換

解決方法：

一，用js方法onerror：

  1，直接在html標籤中使用

<img src="images/logo.png" onerror="this.src='images/errorLogo.png';">複製代碼

  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.onerror=null;    
}

<img src="images/logo.png" onerror="noImg();">複製代碼

二，不支持onerror時，利用css3的background設置多背景圖片

background-image：url("images/logo.png"),url("images/errorLogo.png");複製代碼

用這種方式第一張圖會顯示在第二張圖片上面，前面url加載不成功直接圖片不顯示，將直接顯示後面默認的圖片資源，想要img單張的效果還需添加以下屬性，並給定寬高

background-repeat: no-repeat; 
background-size: cover;複製代碼

這種方式的問題：兩張圖片都加載成功的狀況下，第一張圖片如有部分透明，會看到第二張圖片。

詳情能夠查看多背景圖像的使用方法：

developer.mozilla.org/zh-CN/docs/…