Почему браузер не загружает изображения webp? (сайт Гэтсби, страница сгенерирована из MDX)

Question

Мне интересно, может ли кто-нибудь помочь мне определить, почему изображения webp не отображаются при просмотре моего сайта gatsby в браузере?

Я использую gatsby-plugin-mdx и gatsby-remark-images с параметром withWebp: true

При такой настройке результирующий источник вывода, который отправляется в браузер, выглядит (примерно) следующим образом ...

<picture>
  <source srcset-"/static/11aaa2b.../a12bc/example-image-1.webp ... etc... snipped
  <source srcset-"/static/33ccc4d.../a12bc/example-image-1.jpg ... etc... snipped
  <img src="/static/33ccc4d.../a12bc/example-image-1.jpg ... etc... snipped
</picture>

Однако браузер отображает только <img> версия, то есть jpg.

Я вижу, что файл webp есть.

Я также подтвердил, что версия webp доступна (т.е. я могу перейти конкретно к файлу webp ...

Почему браузер не отображает версию webp?

Заранее спасибо за ваше время / мысли по этому поводу, чтобы помочь мне понять это.

Я искал, но еще не нашел ответ, используя следующее:

• Проверено здесь в StackOverflow с использованием этого поискового запроса .
• Ищите что-то в нескольких разновидностях поиска Google, , например
• Повторно проверено соответствующее использование doco , чтобы убедиться, что я все настраивал правильно

Answer 1

Отвечено @ ksav в комментариях выше.

Оказывается, браузер на самом деле обслуживает веб-версию изображения.

Используя this метод для проверки свойств элемента и, глядя на свойство currentSr c, я могу подтвердить, что webp активно используется.

Проблема заключалась в том, как я проверял ранее.

Я полагался на то, что Chrome Инструменты разработчика выделяли в окне элементов. В этой выделенной области выглядело, как будто это был тег <img>, который обрабатывался.

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

Спасибо @ ksav за предложение. Это отвечает на вопрос.