为什么尽管http状态为404，图像和图片元素仍显示图像？答案

【问题标题】：Why do image and picture elements display images despite http status 404?为什么尽管http状态为404，图像和图片元素仍显示图像？
【发布时间】：2020-02-21 21:37:00
【问题描述】：

以下请求会返回 404 的 HTTP 状态码，但还会在响应正文中返回 content-type: image/jpeg 和有效的 JPEG 数据：

https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg

如果将其设置为图像的src，图像仍会显示。此外，onerror 事件没有被触发，所以我不能使用onerror="this.src=this.src.replace('maxres', 'sd')" 来触发回退。

这种行为在 Firefox/Chrome/Edge 中是一致的，所以我想知道 1) 这是否是标准中定义的内容？或者它实际上是所有主流浏览器中都存在的错误？

将它用作picture 元素中的源也不会让它回退到下一个可用的图像大小并显示“损坏”的图像。

<h3>Plain image element:</h3>
<img src="https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg" onerror="this.src=this.src.replace('maxres', 'sd')">

<h3>Picture element:</h3>
<picture>
  <source media="(max-width: 640px)" srcset="https://img.youtube.com/vi/lXMskKTw3Bc/sddefault.jpg">
  <source media="(max-width: 480px)" srcset="https://img.youtube.com/vi/lXMskKTw3Bc/hqdefault.jpg">
  <source media="(max-width: 320px)" srcset="https://img.youtube.com/vi/lXMskKTw3Bc/mqdefault.jpg">
  <source srcset="https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg">
  <img src="https://img.youtube.com/vi/lXMskKTw3Bc/sddefault.jpg" type="image/jpeg">
</picture>

<h3>expected output:</h3>
<img src="https://img.youtube.com/vi/lXMskKTw3Bc/sddefault.jpg">

2) 有没有办法绕过这种情况并退回到下一个不会导致 404 状态的较小图像尺寸，最好不使用 JavaScript？

【问题讨论】：

documentation 声明当图像“加载失败” 时会抛出 onerror。在您的情况下，图像已成功加载；它只是伴随着一个 404 通知您它不是您最初请求的图像。
好的，我希望 404 优先于有效的图像数据，或者除了显示图像之外至少触发错误事件。但似乎它根本不被视为错误，所以我想除了通过 JS 检查请求（或者在这种特定情况下通过 JS 检查 YouTube API 并且只考虑图像大小）之外，没有其他办法返回）。

标签： html image web-standards

【解决方案1】：

感谢@Tyler Roper 的评论：

documentation 声明当图像“加载失败” 时会抛出 onerror。在您的情况下，图像已成功加载；它只是伴随着一个 404 通知您它不是您最初请求的图像。

对于我的具体情况，我是这样解决的：

<img
  src="https://img.youtube.com/vi/lXMskKTw3Bc/maxresdefault.jpg"
  onload="if (this.naturalWidth < 1280) { this.src = this.src.replace('maxres', 'sd') }">

因此，它首先加载maxresdefault，通常应至少为 1280 像素宽。如果小于，则图片源改为sddefault。

【讨论】：