Не удалось загрузить ресурс: сервер ответил статусом 404 (), но при посещении URL-адреса напрямую отображается изображение

Question

У меня странная проблема, когда браузер сообщает, что сервер возвращает 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, он показывает ошибку 404, если не выглядит.

Итак, в этом случае проблема заключалась в том, что WebP была ошибка 404, но я проверял JPG как я ожидал, он отступит.