如何檢查圖像是否存在？

Question

我有應用程序，其中應在某些頁面中設置圖像。 這些圖像位於服務器上，每個圖像都附加了唯一的ID。 以下是圖像名稱的示例：

AA_image1.jpg
AB_image1.jpg
AC_image1.jpg
AD_image1.jpg
AE_image1.jpg

我看過以前的開發人員做了什么以及他們如何檢查圖像的存在。 他們使用了具有id和圖像名稱的JSON文件。 以下是該代碼的示例：

 var images = [{ "id": "AA", "image": "AA_image1.jpg" }, { "id": "AB", "image": "AB_image1.jpg" }, { "id": "AC", "image": "AC_image1.jpg" }, { "id": "AD", "image": "AD_image1.jpg" }, { "id": "AE", "image": "AE_image1.jpg" } ]; var imgID = "AC"; var imgPrimary = "AC_image1.jpg"; var found = false; var imgDefault = "default.jpg"; for (i = 1; i < images.length; i++) { if (images[i].id == imgID && (images[i].image).toLowerCase() == (imgID + '_image1.jpg').toLowerCase()) { found = true; break; } } if (found === true) { console.log(imgPrimary); } else { console.log(imgDefault); } 

上面的例子看起來很簡單，但我擔心的是如果圖像從文件夾中刪除而JSON文件沒有更新？ 在這種情況下，我們將加載不存在的圖像而不是默認圖像。 我想知道這種方法是否會更好：

var imgID = "AC";
var imgNames = [imgID + '_image1','default'];
var imgResults = {};

for(var i = 0;  i < imgNames.length; i++){
   checkImage( imgNames[i] );
}

function checkImage( imgName, keyName ) {
    $.ajax({
        type: "GET",
        async: true,
        url: "images/"+imgName+".jpg",
    }).done(function(message,text,jqXHR){
         imgResults[imgName] = true;
    }).fail(function(jqXHR, textStatus, errorThrown){
         imgResults[imgName] = false;
    });
 }

以下是該過程完成后的imgResults示例：

console.log(imgResults);

控台結果：

{
  "default": true,
  "AG_image1": false
}

我在第二個例子中遇到的唯一問題是，如果我嘗試根據鍵檢查結果，我會得到未定義的。 這是一個例子：

console.log(imgResults["AG_image1"]);

這是控制台的結果：

undefined

在兩者之間，我不確定哪一個更好，更安全。 如果有人有任何建議，請告訴我。

Answer 1

這可能是處理JS中丟失圖像的最短代碼。 imagePad是對要在其中顯示圖像的DOM元素的引用。

var img = new Image();
img.addEventListener('error', function (e) {
    // Image not found, show the default
    this.src = iconBase + 'gen.png';
});
img.addEventListener('load', function () {
    imagePad.appendChild(img);
}
img.src = 'the_given_src';

Answer 2

默認情況下，AJAX請求是異步的

您在嘗試時無法搜索imgResults對象的原因是因為AJAX請求是異步的，並且在您嘗試訪問結果時請求尚未完成。 在繼續之前，您需要等待請求完成。

console.log顯示結果的原因是因為console.log是惰性的，並且在您在開發工具中展開它之前不評估該對象， console.dir將在該點顯示一個空對象。

此外，由於您有多個要等待的請求，因此您需要創建一個promise數組，其中每個promise對應於每個請求的加載/失敗，然后使用Promise.all等待所有promise完成在對結果進行操作之前。

驗證資源是否存在

要驗證資源是否存在，您可以使用HEAD請求而不是GET請求，以防止無緣無故地加載整個圖像。 由於XMLHttpRequest在當今時代得到了很好的支持，因此也無需依賴jQuery這樣的大型庫來滿足AJAX請求。

 class ResourceValidator extends EventTarget { constructor(target) { super() this.target = target this._ready = false this._valid = false this.validate() } validate() { const request = new XMLHttpRequest() request.addEventListener('load', event => { this._ready = true this._valid = true this.dispatchEvent(new Event('ready')) }) request.addEventListener('error', event => { this._ready = true this.dispatchEvent(new Event('ready')) }) request.open('HEAD', this.target) request.send() } get ready() { return new Promise(resolve => { if(this._ready === true) resolve(true) else this.addEventListener('ready', _ => resolve(true)) }) } get valid() { return new Promise(resolve => { if(this._ready === true) resolve(this._valid) else this.addEventListener('ready', _ => resolve(this._valid)) }) } } async function validateImageSources(sources) { const results = {} const promises = [] for(let source of sources) { const validator = new ResourceValidator(source) const promise = validator.valid promise.then(valid => results[source] = valid) promises.push(promise) } await Promise.all(promises) return results } validateImageSources([ 'https://picsum.photos/200', 'https://nosuchaddress.io/image.png' ]).then(results => { console.log(results) console.log(results['https://picsum.photos/200']) })