Ошибка 404 в Chrome не загружаются картинки

Почему не загружаются картинки в Chrome, Opera и т.д.?
Самое, что удивительное всё работает хорошо в браузере Edge.

Ошибка: GET http://localhost:3000/images/320/gallery_image_1.avif 404 (Not Found)

Код подключения картинок:

<picture>
   <source srcset="images/320/gallery_image_1.avif 1x, images/320/[email protected] 2x, images/320/[email protected] 3x" media="(min-width: 6.25em) and (max-width: 26.25em)" type="image/avif">
   <source srcset="images/320/gallery_image_1.webp 1x, images/320/[email protected] 2x, images/320/[email protected] 3x" media="(min-width: 6.25em) and (max-width: 26.25em)" type="image/webp">
   <source srcset="images/320/gallery_image_1.jpg 1x, images/320/[email protected] 2x, images/320/[email protected] 3x" media="(min-width: 6.25em) and (max-width: 26.25em)">
   <source srcset="images/768/gallery_image_1.avif 1x, images/768/[email protected] 2x, images/768/[email protected] 3x" media="(min-width: 26.313em) and (max-width: 48em)" type="image/avif">
   <source srcset="images/768/gallery_image_1.webp 1x, images/768/[email protected] 2x, images/768/[email protected] 3x" media="(min-width: 26.313em) and (max-width: 48em)" type="image/webp">
   <source srcset="images/768/gallery_image_1.jpg 1x, images/768/[email protected] 2x, images/768/[email protected] 3x" media="(min-width: 26.313em) and (max-width: 48em)">
   <source srcset="images/1024/gallery_image_1.avif 1x, images/1024/[email protected] 2x, images/1024/[email protected] 3x" media="(min-width: 48.063em) and (max-width: 75em)" type="image/avif">
   <source srcset="images/1024/gallery_image_1.webp 1x, images/1024/[email protected] 2x, images/1024/[email protected] 3x" media="(min-width: 48.063em) and (max-width: 75em)" type="image/webp">
   <source srcset="images/1024/gallery_image_1.jpg 1x, images/1024/[email protected] 2x, images/1024/[email protected] 3x" media="(min-width: 48.063em) and (max-width: 75em)">
   <source srcset="images/1920/gallery_image_1.avif 1x, images/1920/[email protected] 2x, images/1920/[email protected] 3x" media="(min-width: 75.063em)" type="image/avif">
   <source srcset="images/1920/gallery_image_1.webp 1x, images/1920/[email protected] 2x, images/1920/[email protected] 3x" media="(min-width: 75.063em)" type="image/webp">
   <img class="slide-gallery__picture" src="images/1920/gallery_image_1.jpg" srcset="images/1920/[email protected] 2x, images/1920/[email protected] 3x" alt="На картине изображен эскиз человека">
</picture>

На самом деле таких ошибок около 25 т.к. картинок столько же и все они не загружаются :)
Раньше такого не было, что сейчас случилось непонятно.


Ответы (1 шт):

Автор решения: nazarpunk

Проверьте существование .avif файлов.

Edge не поддерживает этот формат и пропускает файл. А Chrome и Opera поддерживают, пытаются загрузить несуществующий файл и закономерно получают 404.

→ Ссылка