从 <img> 标签获取 HTTP 状态代码或响应标头？

Posted 2023-02-19

【中文标题】从 <img> 标签获取 HTTP 状态代码或响应标头？

【英文标题】：Get HTTP status code or response headers from <img> tag?

【发布时间】：2015-06-08 21:04:44

【问题描述】：

在我正在构建的此服务中，对图像的请求可能会导致两种可能的响应。

它响应请求的图像。

它以默认图像响应，并指示请求的图像不能立即可用。在这种情况下，请求可能会重复。

指示案例#2 的明显方法是使用202 状态代码或X-Retry-In 标头响应。不过，我愿意接受建议。

无论如何，我的目标是以某种方式在 JS 中捕获此响应（http 标头/状态代码/其他想法欢迎）并在几秒钟后自动重试图像。

我知道可以用 ajax 来做一些近似的事情，但我真的更喜欢只使用 JS + 标签的解决方案。

【问题讨论】：

获取HTTP头的唯一方法是在JS中制作HTTP。这只能通过 XMLHTTPRequest 来完成。 编辑：不过，您可以尝试在img 上监听error 事件，看看它为您提供了什么信息。

如果没有其他办法，我想我将不得不在循环中求助于 HEAD Ajax 请求。

【参考方案1】：

试试这样的：

$.ajax(
type: "GET",
url: "YOURURL",
dataType: "image/png",
success: function(img) 
  i = new Image();
  i.src = img; // your image
,
error: function(err) 
  i = new Image();
  i.src = 'http://website.site/image.png' // your error image

);

【讨论】：

如果指定 url 的图片资源没有启用 CORS，这将不起作用。