加载资源失败：服务器响应状态为404()但访问url直接显示图片答案

【问题标题】：Failed to load resource: the server responded with a status of 404 () but visiting url directly shows image加载资源失败：服务器响应状态为404()但访问url直接显示图片
【发布时间】：2021-06-12 18:14:57
【问题描述】：

我有一个奇怪的问题，浏览器说服务器在图像上返回 404。

但是直接访问 URL 会显示图像。图片位于<picture> 元素内，加载顺序略有不同。这可能是原因，如果是，为什么？可以缓存吗？

这里是网站： https://www.vamoney.squareballoon.co.uk/

这是我在那个网站上的代码：

<picture>
  <source media="(min-width:1201px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--1920.webp" type="image/webp">
  <source media="(min-width:1201px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--1920.jpg" type="image/jpg">
  <source media="(min-width:960px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--1200.webp" type="image/webp">
  <source media="(min-width:960px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--1200.jpg" type="image/jpg"><source media="(min-width:768px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--959.webp" type="image/webp">
  <source media="(min-width:768px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--959.jpg" type="image/jpg">
  <source media="(min-width:480px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--767.webp" type="image/webp">
  <source media="(min-width:480px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--767.jpg" type="image/jpg">
  <source media="(min-width:0px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--479.webp" type="image/webp">
  <source media="(min-width:0px)" srcset="/images/aspirational-photos/borrow--va-money-main-image--479.jpg" type="image/jpg">
  <img src="/images/aspirational-photos/borrow--va-money-main-image--479.jpg" alt="VA Money - A picture of a calculator and some documents representing the idea that you can Borrow Money for your business requirements">
</picture>

浏览器说图片是404。但是直接访问一个（最简单的点击img=src上的那个会显示图片。

https://www.vamoney.squareballoon.co.uk/images/aspirational-photos/borrow--va-money-main-image--479.jpg

它怎么可能既是 404 又是可见的？这一定是我做的很愚蠢的事情吧？

【问题讨论】：

标签： image http-status-code-404 picture-element

【解决方案1】：

我使用<picture> 元素来显示WebP 和JPG 后备。

我误解了JPG 会回退，因为它只会在浏览器不支持WebP 时回退。当它支持 WebP 时，如果 WebP 不显示，则会显示 404 错误。

所以在这种情况下，问题在于 WebP 是 404 错误，但我正在检查 JPG，因为我预计它会回退。

【讨论】：