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

Question

鉴于：

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

img.onerror = function() { … };

img.src = new_url;

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

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

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

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

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

Answer 1

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

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

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

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

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