Ошибка изображения возникла, если не существует

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);