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

Question

我有一个奇怪的问题，浏览器说服务器 returns 图像上的 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又是可见的？这一定是我做的蠢事吧？

Answer 1

我使用了 <picture> 元素来显示 WebP 和 JPG 回退。

我误以为JPG会回退，因为只有当浏览器不支持WebP时才会回退。当它支持 WebP 时，如果 WebP 不正确，它会显示 404 错误。

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

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

Failed to load resource: the server responded with a status of 404 () but visiting url directly shows image

image

http-status-code-404

picture-element