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

Posted 2023-03-15

技术标签:

【中文标题】JavaScript img.src onerror 事件 - 获取错误原因【英文标题】：JavaScript img.src onerror event - get reason of error 【发布时间】：2017-03-27 03:27:19 【问题描述】：

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

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

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

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

【问题讨论】：

可以看到这个问题：***.com/questions/9714525/javascript-image-url-verify/… 这不是在回答我的问题。我编辑了问题，使其更具体。我只是想给你一个建议，而不是答案，因为我认为无法从 onerror 事件中检索错误类型。 【参考方案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