Image .onerror — 区分服务器响应 400 和 200 但内容类型不是图像？

问题描述

给定：

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

img.onerror = function() { … };

img.src = new_url;

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

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

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

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

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

解决方法

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

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

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

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

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