草庐IT

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

coder 2024-12-30 原文

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

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

有没有办法知道错误是否是由于网络错误引起的，比如 HTTP 500还是网络超时？

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

最佳答案

编辑16Nov16 2020GMT

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

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

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

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

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

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

onerror对于 <img>提供有关网络的有限信息

可从 <img> 获得的信息可以在 https://www.w3.org/TR/html/semantics-embedded-content.html#htmlimageelement-htmlimageelement

旧答案:

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

编辑14Nov16 2018GMT

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

编辑15Nov16 0832GMT

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

转换为 Base64

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

或者如果您担心旧版浏览器能够使用 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.
        }
});

注意事项

Using of a generic-purpose image viewing application this way inherits the security problems of the most dangerous type supported by the application.

The effect of using long "data" URLs in applications is currently unknown; some software packages may exhibit unreasonable behavior when confronted with data that exceeds its allocated buffer size.

其他引用资料

关于JavaScript img.src onerror 事件 - 获取错误原因，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40572712/

JavaScriptonerrorcodehttpsnoreferrer

有关JavaScript img.src onerror 事件 - 获取错误原因的更多相关文章

  1. ruby-on-rails - Rails 常用字符串(用于通知和错误信息等) - 2

    大约一年前，我决定确保每个包含非唯一文本的Flash通知都将从模块中的方法中获取文本。我这样做的最初原因是为了避免一遍又一遍地输入相同的字符串。如果我想更改措辞，我可以在一个地方轻松完成，而且一遍又一遍地重复同一件事而出现拼写错误的可能性也会降低。我最终得到的是这样的:moduleMessagesdefformat_error_messages(errors)errors.map{|attribute,message|"Error:#{attribute.to_s.titleize}#{message}."}enddeferror_message_could_not_find(obje

  2. ruby-on-rails - 迷你测试错误 : "NameError: uninitialized constant" - 2

    我遵循MichaelHartl的“RubyonRails教程:学习Web开发”，并创建了检查用户名和电子邮件长度有效性的测试(名称最多50个字符，电子邮件最多255个字符)。test/helpers/application_helper_test.rb的内容是:require'test_helper'classApplicationHelperTest在运行bundleexecraketest时，所有测试都通过了，但我看到以下消息在最后被标记为错误:ERROR["test_full_title_helper",ApplicationHelperTest,1.820016791]test

  3. ruby-on-rails - 如何在 Rails View 上显示错误消息？ - 2

    我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c

  4. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  5. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  6. ruby-on-rails - 错误 : Error installing pg: ERROR: Failed to build gem native extension - 2

    我克隆了一个rails仓库，我现在正尝试捆绑安装背景:OSXElCapitanruby2.2.3p173(2015-08-18修订版51636)[x86_64-darwin15]rails-v在您的Gemfile中列出的或native可用的任何gem源中找不到gem'pg(>=0)ruby​​'。运行bundleinstall以安装缺少的gem。bundleinstallFetchinggemmetadatafromhttps://rubygems.org/............Fetchingversionmetadatafromhttps://rubygems.org/...Fe

  7. ruby - ＃之间？ Cooper 的 *Beginning Ruby* 中的错误或异常 - 2

    在Cooper的书BeginningRuby中，第166页有一个我无法重现的示例。classSongincludeComparableattr_accessor:lengthdef(other)@lengthother.lengthenddefinitialize(song_name,length)@song_name=song_name@length=lengthendenda=Song.new('Rockaroundtheclock',143)b=Song.new('BohemianRhapsody',544)c=Song.new('MinuteWaltz',60)a.betwee

  8. ruby-on-rails - 每次我尝试部署时，我都会得到 - (gcloud.preview.app.deploy) 错误响应 : [4] DEADLINE_EXCEEDED - 2

    我是Google云的新手，我正在尝试对其进行首次部署。我的第一个部署是RubyonRails项目。我基本上是在关注thisguideinthegoogleclouddocumentation.唯一的区别是我使用的是我自己的项目，而不是他们提供的“helloworld”项目。这是我的app.yaml文件runtime:customvm:trueentrypoint:bundleexecrackup-p8080-Eproductionconfig.ruresources:cpu:0.5memory_gb:1.3disk_size_gb:10当我转到我的项目目录并运行gcloudprevie

  9. ruby - 从 Ruby 中的主机名获取 IP 地址 - 2

    我有一个存储主机名的Ruby数组server_names。如果我打印出来，它看起来像这样:["hostname.abc.com","hostname2.abc.com","hostname3.abc.com"]相当标准。我想要做的是获取这些服务器的IP(可能将它们存储在另一个变量中)。看起来IPSocket类可以做到这一点，但我不确定如何使用IPSocket类遍历它。如果它只是尝试像这样打印出IP:server_names.eachdo|name|IPSocket::getaddress(name)pnameend它提示我没有提供服务器名称。这是语法问题还是我没有正确使用类？输出:ge

  10. ruby-on-rails - Rails 5 Active Record 记录无效错误 - 2

    我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa

随机推荐