如果不存在图像错误

Question

我想在网格中显示图像。但如果图像不存在，我想显示 no-image.png。但目前如果图像不存在，它会显示控制台上的错误

"GET http://localhost/images/image.png 404 (Not Found)". 

我不想要这个错误，如果图像不存在。请帮我该怎么办.. 这是我的代码。

var image = $('<img src="/images/image.png" />'); 
      if (image.attr('width') > 0) 
       return '/images/No_image.png'; 
      else 
       return '/images/image.png'; 

Answer 1

要做到这一点，你可以使用error()事件img元素。如果引发该事件，那么您知道图像未成功加载，无论是来自服务器错误还是404。在这种情况下，您可以将src属性更改为占位符。试试这个：

$('<img src="/images/image.png" />').error(function() { 
    $(this).attr('src', '/images/No_image.png'); 
}); 

Answer 2

您可以使用下面的代码来检查是否存在图像

function isImageExists(imgSrc, callBackAfterCheck) { 
    var img = new Image(); 
    img.onload = function() { callBackAfterCheck(true) }; 
    img.onerror = function() {callBackAfterCheck(false) }; 
    img.src = imgSrc; 
} 

function callBackAfterCheck(status){ 
    if(status == true){ 
    //do your stuff here 
    console.log('image Exist'); 
    }else{ 
    //do your stuff here 
    console.log('image not Exist'); 
    } 
} 

var imageUrl = 'your_image_url'; 
isImageExists(imageUrl, callBackAfterCheck);