存在しない場合、画像エラーが発生しました

Question

グリッドに画像を表示したいと思います。画像が存在しない場合は、表示したい no-image.png。現在画像が存在しない場合は、コンソールにエラーが表示されます

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

画像が存在しない場合はこのエラーを表示しません。私が何をすべきか教えてください。 ここに私のコードです。あなたがimg要素のerror()イベントを使用することができ、これを達成するために

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

Answer 1

。そのイベントが発生すると、サーバーエラーまたは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);