Почему src внутри <picture>элемента не загружается?

Question

<picture>
  <source type="image/webp" srcset="images/me.webp">
  <img id="avatar" src="images/me.webp" alt="Me">
</picture>

Когда я использую элемент picture, браузер (chrome) не загружает изображение с другими ресурсами.Однако, когда я заменяю <picture> только элементом <img>, он работает нормально:

<img id="avatar" src="images/me.webp" alt="Me">

Почему это происходит?

Answer 1

AFAIK, <picture> используется, когда вы хотите использовать несколько возможных изображений в адаптивном дизайне.<img> в конце - запасной вариант.Звучит так, как будто images/me.webp не работает.

Если вы действительно не используете <picture>, используйте <img>.

Answer 2

Ваш код загрузит изображение me.webp, если браузер его поддерживает.Если нет, изображение jpg будет показано (который работает).Chrome 67 поддерживает формат webp, поэтому единственная проблема, которую я могу выяснить, заключается в том, что me.webp отсутствует в папке с изображениями.