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

Question

I have a weird problem where the browser says the server returns a 404 on an image.

However visiting the URL directly shows the image. The image is within the <picture> element, which loads in a slightly different order. Could that be the cause, and if so why? Could it be cached?

Here's the site: https://www.vamoney.squareballoon.co.uk/

And here's my code from that site:

<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>

The browser says the images are a 404. But visiting one directly (it's easiest to click the one on the img=src shows the image.

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

How can it be both a 404 and also viewable? This must be something idiotic I am doing right?

Answer 1

I had used the <picture> element to show WebP with a JPG fallback.

I had misunderstood that the JPG would fall back, because it only falls back when the browser does not support WebP. When it does support WebP it shows a 404 error if the WebP doesn't look.

So in this case, the issue was that the WebP was a 404 error but I was checking the JPG as I expected it to fall back.