如何檢測圖像加載失敗的原因？

我在頁面上有一個img元素，其src在頁面加載時動態設置（針對不同情況的不同圖像以及圖像由客戶端提供）。如何檢測圖像加載失敗的原因？

我可以檢測到圖像無法加載時，我通過報告來處理。當它無法加載時，我也設置了一個佔位符圖像。

<img alt="Image not found" onError="failedToLoadResource" id="something" class="class1 class2">

這個偉大的工程。但是，只知道圖像加載失敗的時間還不夠。我需要能夠確定它爲什麼發生。該圖像託管在我們的服務器上，因此404不太可能，但並非不可能。我無法訪問客戶端的設備，也無法按照他們描述的方式重現問題。

我試着環顧四周，但我無法找到我要找的......

我猜它可能是404，一些CSP配置問題，也許有些互聯網連接打嗝，不管。我只是想知道它是什麼，所以我可以更好地理解它。

編輯：忘了說代碼是在科爾多瓦的應用程序，所以沒有日誌來檢查。

2017-10-06 Silviu

因此，您在圖片失敗後對圖片執行Ajax調用，並以此方式獲取狀態碼。 – epascarello

也許你應該檢查你的服務器日誌爲什麼圖像沒有被正確加載/傳送？您當然可以在客戶端執行AJAX請求並檢查返回的HTTP狀態代碼，但它只會告訴您錯誤的類型，而不是它失敗的原因。 – Terry

src被動態設置 - 取決於如何設置，你最有可能得到404s，因爲它沒有被正確設置。 –

從客戶端，你可以嘗試通過ajax調用，然後解析響應來訪問圖像。使用jQuery輕鬆完成。

var call = $.ajax("image.img") 
    .fail(function(call, textStatus) { 
    alert("Request failed: " + textStatus); 
    });

從服務器端，您可以檢查服務器日誌，尋找正確的請求，看看發生了什麼。如果請求從未到達服務器，則可能是網絡/路由/防火牆問題。

但是，執行此操作的步驟高度依賴於後端中使用的內容。

2017-10-06 12:46:08 DanteTheSmith

忘記說代碼是在科爾多瓦的應用程序，所以沒有日誌來檢查。 ajax調用是一個聰明的想法，我肯定會實現。但是，那些可能不是唯一可能影響這個問題的問題是正確的？ – Silviu

事實上，前臺實際上被模擬爲本地瀏覽器並不意味着後端不記錄請求。除非您使用的服務器中沒有您擁有或控制的圖片。還是你想說你在設備上本地存儲圖像？因爲這可能是你在哪裏以及如何做的問題。 – DanteTheSmith

你說得對，我忘記了服務器訪問/錯誤日誌。我看不到任何可能意味着資源未找到或請求被拒絕的情況。我會接受這個答案，因爲它提供了一個相當聰明的解決方案。 – Silviu

回答