JavaScript img.src onerror 事件 - 获取错误原因

Question

<img> 加载错误可能有不同的原因，例如网络错误响应、错误的图像数据...

从onerror 收到的error 对象似乎没有说明确切的原因。

有没有办法知道错误是因为网络错误，比如HTTP 500 还是网络超时？

编辑： 我不是寻找加载资源的替代方法，例如 AJAX 请求。我需要一个专门针对带有onerror 事件的<img> 标签的答案。原因是我正在使用这种方法进行像素跟踪，并且我需要一种方法来重试网络错误。我也不在寻找替代的跟踪方法，例如 JSONP。

Answer 1

编辑16Nov16 2020GMT

也许您是电子邮件中的 pixel-tracking 或其他限制 Javascript 功能的客户端。

想到的一个想法是在您的<img> 的src URL 中使用URL 查询参数。

关于网络超时，我会提出这样一个想法：用户打开一封电子邮件，完全加载电子邮件，然后断开与互联网的连接，不知何故这并没有给跟踪器足够的时间来加载。

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout

我建议在 onerror 函数中使用 setTimeout()。 这将继续尝试设置/加载<img> 的src URL。您可以将成功加载所需的秒数附加到您的 src 文件的 URL 作为查询参数，例如 ?s=<sec>

至于确定图像加载上的状态500 代码，您可能需要考虑创建一个自定义的500 错误文件，然后该文件将创建——例如——一个 MySQL 数据库条目，其中包含你可以访问的各种信息如果您选择使用前面提到的查询参数，那么您会在错误中添加更多信息。

onerror for <img> 提供了有关网络的有限信息

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

---

旧答案：

也许您想尝试的一种方法是使用 AJAX 加载图像数据并将<img> src 设置为接收到的图像数据的 base64。我希望这会有所帮助。

编辑14Nov16 2018GMT

或者使用 AJAX 来确定图像是否正确加载，然后然后使用发送到 AJAX 的相同 URL 作为 src 的 <img>。这当然是多余的，但可以避免长“数据”URL 的问题。

编辑15Nov16 0832GMT

关于网络超时，我发现这个线程很有用JQuery Ajax - How to Detect Network Connection error when making Ajax call 显然，您可以像使用 error 一样为 AJAX 指定 timeout，只是您只需手动提供毫秒数。

转换为 Base64

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding

• https://developer.mozilla.org/en-US/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: How to get the HTTP status code from within the $.ajax.error method?

$.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://www.rfc-editor.org/rfc/rfc2397#section-3

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

• https://www.rfc-editor.org/rfc/rfc2046#section-4.2

以这种方式使用通用图像查看应用程序 继承支持的最危险类型的安全问题 由应用程序。

• https://www.rfc-editor.org/rfc/rfc2397#page-4

目前在应用程序中使用长“数据”URL 的效果是 未知;某些软件包可能表现出不合理的行为 当遇到超过其分配的缓冲区大小的数据时。

其他参考

• Unknown file type MIME?
• Asynchronously load images with jQuery