如何解决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
在那种情况下,您根本不会有错误事件,对于浏览器而言,它确实收到了有效的图像并且可以对其进行解码。
如果浏览器触发错误事件,那总是因为资源不是有效图像,而不是因为响应状态。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。