JavaScript img.src onerror事件-獲取錯誤原因

Question

<img>加載錯誤可能有不同的原因，例如網絡錯誤響應，錯誤的圖像數據...

從onerror收到的error對象似乎未指定確切原因。

是否有辦法知道錯誤是由於網絡錯誤（例如HTTP 500還是網絡超時）引起的？

編輯：我不是在尋找一種替代方法來加載資源，例如AJAX請求。 我需要一個專門針對帶有onerror事件的<img>標簽的答案。 這樣做的原因是我正在使用這種方法進行像素跟蹤，並且需要一種方法來重試網絡錯誤。 我也不在尋找其他替代跟蹤方法，例如JSONP。

Answer 1

編輯16Nov16 2020GMT

也許您正在跟蹤電子郵件或Javascript功能受限的其他客戶端中的像素 。

我想到的一個想法是在<img>的src URL中使用URL查詢參數。

關於網絡超時，我將提出一個想法，即用戶打開一封電子郵件，完全加載該電子郵件，然后斷開與Internet的連接，並且這不給跟蹤器足夠的時間來加載。

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowTimers/setTimeout

我建議在您的onerror函數中使用setTimeout() 。 這將繼續嘗試設置/加載<img>的src URL。 您可以將成功加載所需的秒數作為查詢參數（如?s=<sec>附加到src文件的URL中。

至於確定圖像加載時的狀態500代碼，您可能需要考慮創建一個自定義500錯誤文件，然后該文件將創建-例如-MySQL數據庫條目，其中包含您可以訪問的各種信息以及是否選擇使用前面提到的查詢參數，那么您將向錯誤中添加更多信息。

<img> onerror給出了有關網絡的有限信息

<img>提供的信息可以在https://www.w3.org/TR/html/semantics-embedded-content.html#htmlimageelement-htmlimageelement中找到

---

較舊的答案：

也許您想嘗試的一種途徑是使用AJAX加載圖像數據並將<img> src設置為所接收圖像數據的base64。 我希望這有幫助。

編輯14Nov16 2018GMT

或者，使用AJAX確定圖像是否正確加載， 然后使用發送到AJAX的相同URL作為<img>的src 。 這當然是多余的，但可以避免長“數據” URL的問題。

編輯15Nov16 0832GMT

另外，關於網絡超時，我發現此線程很有用。jQuery Ajax-在進行Ajax調用時如何檢測網絡連接錯誤顯然，您可以像使用error一樣指定AJAX timeout ，只是您手動提供了毫秒。

轉換為Base64

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

• https://developer.mozilla.org/zh-CN/docs/Web/API/WindowBase64/btoa

   var encodedData = window.btoa("Hello, world"); // encode a string 

或者，如果您對能夠使用btoa()舊版瀏覽器感到驚訝，那么您可能會對Google的https://chromium.googlesource.com/chromiumos/platform/spigots/+/refs/heads/firmware-u-boot-v1感興趣/base64_encode.js

jQuery的AJAX中的狀態代碼檢查

jQuery：如何從$ .ajax.error方法中獲取HTTP狀態代碼？

$.ajax({
    type: 'GET',
    url: '/path-to-my/image.png',
    data: null,
    success: function(data){
        alert('horray! 200 status code!');
        // convert to base64; add to img.src # btoa(data)
        document.querySelector("#hlogo img").src = "data:;base64,"+ data;
    },
    error:function (xhr, ajaxOptions, thrownError){
        switch (xhr.status) {
            case 400:
                 // Take action, referencing xhr.responseText as needed.

            case 404:
                 // Take action, referencing xhr.responseText as needed.

            case 500:
                 // Take action, referencing xhr.responseText as needed.
        }
});

筆記

• https://tools.ietf.org/html/rfc2397#section-3

   dataurl := "data:" [ mediatype ] [ ";base64" ] "," data mediatype := [ type "/" subtype ] *( ";" parameter ) data := *urlchar parameter := attribute "=" value 

• https://tools.ietf.org/html/rfc2046#section-4.2

  以這種方式使用通用圖像查看應用程序會繼承該應用程序支持的最危險類型的安全問題。

• https://tools.ietf.org/html/rfc2397#page-4

  目前尚不清楚在應用程序中使用長“數據” URL的影響。 某些軟件包遇到超過其分配的緩沖區大小的數據時，可能會表現出不合理的行為。

其他參考

• 未知的文件類型MIME？
• 用jQuery異步加載圖像