在 Firefox 中显示返回 HTTP 503 的图像

Posted 2023-03-10

【中文标题】在 Firefox 中显示返回 HTTP 503 的图像

【英文标题】：Display image that returns HTTP 503 in Firefox

【发布时间】：2020-10-31 03:41:57

【问题描述】：

我有一个状态标志图像，当相应的服务离线时返回 HTTP 代码 503（但网络服务器仍然在那里服务调用）。现在直接打开图像 URL 将正确显示图像，而不管底层的 503 错误代码如何。但是在<img> 标签中使用它会显示损坏的图像图标。如何在仍然允许图像本身返回 503 的同时防止这种情况？ （外部服务依赖于此）

这里有一些截图来说明发生了什么：

页面上的徽章：

开发者控制台中的状态信息：

徽章本身：

注意：这发生在 Firefox 上。不是 Chrome

编辑：以下是一些请求的信息：

Firefox 78.0.2（64 位） 它来自同一个域。但是域本质上只是代理一些底层网络服务。这个徽章来自不同的服务，但都在同一个域中。 这是一个 SVG 图像，如果这有什么不同的话。

【问题讨论】：

您能提供更多信息吗？那个徽章是哪里来的？图片是否通过不同的域名提供？您使用的是哪个版本的 Firefox？我刚刚设置了一个包含两个图像（200 和 503 http 状态代码）的场景，并且都显示了。

@CarlosJiménez 我更新了我的问题。并确保通过<img> 标签包含图像。只需打开图像本身也对我有用。

我认为 Firefox 可能会阻止从您的特定网页加载图像，或者某些插件阻止了它。检查此链接：support.mozilla.org/en-US/kb/fix-problems-images-not-show。希望对你有帮助

@BrainStone 检查以确保返回的 SVG 或图像标签具有定义的宽度。在 Firefox 中，如果 SVG、img 标签或这些标签的祖先没有明确的宽度，图像标签中的 svg 将不会显示。 CSS 宽度被忽略。

【参考方案1】：

由于 XMLHttpRequest 可以检索任何请求的输出，所以无论响应码如何，都可以通过 XMLHttpRequest 请求图片，然后将 blob 响应类型转换为 base64 格式的图片，可以在浏览器中加载.

我在示例代码中使用的 CORS 代理在大多数情况下可能不是必需的，但在您尝试显示的图像具有阻止从另一个域访问图像的奇怪响应标头的情况下可能很有用.

这里是示例代码。无论响应代码、CORS 等如何，它都应该可以工作。

var xhr = new XMLHttpRequest();

xhr.onload = function () 
    var reader = new FileReader();
    reader.onloadend = function () 
        // here, reader.result contains the base64-formatted string you can use to set the src attribute with
        document.getElementsByTagName('img')[0].src = reader.result; // sets the first <img> tag to display the image, change to the element you want to use
    ;
    reader.readAsDataURL(xhr.response);
;

xhr.open('GET', "https://cors-anywhere.herokuapp.com/i.stack.imgur.com/8wB1j.png"); // don't include the HTTP/HTTPS protocol in the url
xhr.responseType = 'blob';
xhr.setRequestHeader('X-Requested-With', 'xhr');
xhr.send();

<img src="about:blank">

一切正常，当您进入 Inspect Element 时，您会看到 <img> 标记的 src 属性指向可以在任何浏览器中加载的 base64 URL。

【讨论】：

虽然我不高兴这是一种解决方法（也是基于 JS 的解决方法），但它是迄今为止最好的答案。

是的，我很抱歉。我确实想提一下，这是非常不切实际的，但至少它是一个你可以使用的有效技巧。可能会有更好的长期解决方案；只需要继续等待他们。

@BrainStone 可以选择使用图像代理吗？我在想 weserv 或 allorigins images.weserv.nl allorigins.win

【参考方案2】：

您可能希望在将图像上传到服务器之前对其进行压缩或调整大小，因为它们可能足够大以使服务器保持忙碌并显示错误，因为大多数情况下，由于服务器太忙而发生 503 错误。 图像的更多内容是 SVG，因此它可能会在完成之前渲染尺寸，因此我建议

尝试用 PNG 或 JPG 替换 SVG 也可以试试https://tinypng.com/这样的网站来压缩图片大小

这可能对你有用

【讨论】：

如问题中所述，503 是故意的。 Web 服务器工作正常。然而，底层服务不是。因此状态。