如果不存在图像错误

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

为此，您可以使用img元素的error()事件。 如果引发该事件，则说明服务器错误或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);