如何檢測圖像路徑是否損壞？

Question

我正在嘗試檢測圖像是否在javascript可用。

我有一個switch語句，它返回不同類型的圖像。

switch (type){

case 'oldProduct':
return "<img src='project/'" + folder + imagename + "/>"
break;

case 'newProduct':
return "<img src='project/'" + folder2 + imagename2 + "/>"
break;

more cases....

}

我想知道在返回圖像之前是否有任何方法可以檢測圖像是否存在。 在我的情況下， <img src='project/'" + folder2 + imagename2 + "/img> src可能是一條損壞的路徑。 非常感謝！

Answer 1

如果您只想使用javascript而不是jquery，我的唯一建議是將圖像加載到頁面上，例如

<img src="yoursrc" id="testImage" style="display:none;"/>

然后檢查onerror方法“在老版本中可能無法正常工作”

var image = document.getElementById('testImage');
im.onerror = function(){
  //do something on error
};

但是，更整潔和可靠的方法是在圖像上運行jquery get。

像這樣

function checkImg(src){
   var jqxhr = $.get(src, function() {
     return true;
   }).fail(function() { 
    return false;
   });
}