Image .onerror — 区分服务器响应 400 和 200，但 Content-Type 不是图像？答案

【问题标题】：Image .onerror — Differentiate between server response 400 versus 200 but with a Content-Type that is not an image?Image .onerror — 区分服务器响应 400 和 200，但 Content-Type 不是图像？
【发布时间】：2021-06-28 22:36:15
【问题描述】：

给定：

const img = document.getElementById('img-id');

img.onerror = function() { … };

img.src = new_url;

更改图像元素的来源可能会导致我非常具体的用例：

服务器状态响应400 Bad Request，或
服务器状态响应 200 OK 带有 Content-Type 不是图像的 HTTP 标头。

我想在 .onerror 函数中区分两者。

我发现基于 Chrome/Blink 的浏览器的 F12 控制台错误有所不同，并希望在纯 JavaScript 条件下捕获这一点。与.onerror 相关的事件是否有任何可能有助于实现此目的的属性？

注意：这适用于渐进式 Web 应用程序。因此，一个适用于 Chrome 和 Safari 的解决方案就足够了。

【问题讨论】：

我不认为有一种方法可以区分 JavaScript，无论如何这在所有浏览器中都是可靠的。为什么会很重要？如果有错误，那就是错误。如果您将元素从页面上移开，您通常已经知道其中有什么。我相信你能想出一个解决方法。
图片从何而来？它是如何加载到 DOM 中的？ php.net/pathinfo
所以，您可以通过我提供的链接使用XMLHttpRequest 来测试路径信息。
声音粗略。我出去了。
您的“400 Bad Request”响应仍然可能有一个非空的正文，甚至是一个与有效图像相对应的正文。例如，imgur 等图像服务经常会在请求实际失败时返回有效的占位符图像。在这种情况下，您根本不会有错误事件。如果浏览器无法解码它总是因为资源不是有效的图像，而不是因为响应状态。

标签： javascript image corrupt onerror server-response

【解决方案1】：

不，您无法读取 HTMLImageElement 发出的请求的状态代码。

您的“400 Bad Request”响应仍可能包含非空正文，甚至是与有效图像相对应的正文。
例如，即使请求实际失败，imgur 等图像服务也经常返回有效的占位符图像。

^{https://i.stack.imgur.com/foobar.png}

在这种情况下，您根本不会有错误事件，对于浏览器而言，它确实收到了有效的图像并且可以对其进行解码。

如果浏览器触发错误事件，总是因为资源不是有效的图像，而不是因为响应状态。

【讨论】：