图片加载错误原因如何处理？答案

【问题标题】：How to handle the image loading error reason?图片加载错误原因如何处理？
【发布时间】：2020-06-21 06:15:09
【问题描述】：

图片加载失败一般有两个原因：

src 无效。
互联网连接不佳。

如何使用onerror 事件处理？

编辑：更多细节：

所以，更具体地说，我为我的 markdown 渲染器创建了一个函数，它可以使用图像语法 ![caption](https://example.com) 渲染嵌入。

输出将是：

<img src="https://example.com" alt="caption" onerror="renderEmbed(this)"></img>

由于无效的 src url 将用于渲染嵌入，与有效 url 的不良连接将一团糟。

【问题讨论】：

你到底是什么意思？我的意思是：您是否正在寻找备用方案以在连接不良等情况下显示图像的替代版本？
请更具体并提供错误处理的上下文。为什么要处理图像错误？你想知道如何使用error事件还是想知道如何分别绑定一个js函数？
所以，更具体地说，我为我的 Markdown 渲染创建了一个函数，它可以使用图像语法 [caption](https://example.com) 渲染嵌入。输出将是：<img src="https://example.com" alt="caption" onerror="renderEmbed(this)"></img>.
由于无效的 src url 将用于渲染嵌入，因此与有效 url 的不良连接将一团糟。
所以基本上你想区分renderEmbed函数中的“invalid src”错误和“连接不良”错误？我说的对吗？

标签： javascript html dom

【解决方案1】：

除了您的问题不是“如何处理图像加载错误原因？”，而是“如何获取图像加载错误原因？”，这个答案非常令人不满意并且已经以更一般的方式得到了回答（请参阅JavaScript img.src onerror event - get reason of error）。

您可以扩展您的代码以生成onerror="renderEmbed(this, window.event)" 以获取错误事件，但该对象不提供有关实际原因的任何信息。您可以使用 jQuery.ajax(...) 并检查它是否加载或返回帽子不是图像的东西（内容类型标题不以image/ 开头）。但这可能会给您带来错误的结果，因为图像应用了另一个 CSRF 处理系统（请参阅链接问题的最佳答案）。

最好的解决方案可能是更改您的漏洞系统以进行服务器端检查，通过请求 url 来验证它是否有效和图像，然后猜测客户端的图像错误不是错误因为网址无效。

我不知道...希望我能帮到你。

【讨论】：

我并没有真正使用 jQuery（我更喜欢 vanilla js），我正在尝试减少请求。我可以通过 fetch 获取内容类型标头吗？
我不会那样做的。 fetch（如 ajax）具有与 img 标签不同的 CORS 策略。例如：<img src="https://www.w3schools.com/images/compatible_chrome.gif"> 将加载，但 fetch('https://www.w3schools.com/images/compatible_chrome.gif') 将引发访问错误 (No 'Access-Control-Allow-Origin' header is present on the requested resource. net::ERR_FAILED)，因为由于多种安全原因，您无法从其他站点读取资源。
旧的呢？ xmlhttp请求
window.event 默认情况下未定义，但不在事件上下文中。（见Window.event）你不应该使用它（这是一种糟糕的代码），它无论如何都没有提供你需要的任何信息。
我认为这个讨论让我们无处可去。如果我在您的位置，我会再次提出问题，并使用更好的标题，并指出 ErrorEvent 对象提供的信息和浏览器的 CORS 策略存在的问题。可能有人有比服务器端更好的主意......但我不这么认为。