загрузить изображения с помощью тега изображения

Question

В настоящее время я пытаюсь использовать тег изображения для веб-сайта.Это мой текущий код (изображение находится в /images/test1.jpg и /images/test2.jpg:

<picture>
  <source srcset="/images/test2.jpg" type="image/jpeg" >
  <img src="/images/test1.jpg">
</picture>

Ожидаемый результат состоит в том, что когда браузер поддерживает его, он загружает изображение из srcsetи в противном случае из тега img. Однако я тестировал в Chrome и Firefox, который должен и поддерживать, и в результате он показывает изображение из srcset размером 0x0 и дополнительно показывает изображение из тега src. Как правильнореализовать это, используя тег изображения?

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

<picture>
  <source class="image" srcset="/images/test2.jpg" type="image/jpeg" >
  <img class="image" src="/images/test1.jpg">
</picture>

Answer 1

Я не совсем понимаю, какова цель здесь. Но вы пропустили атрибут СМИ. Последний запасной вариант работает только при отсутствии носителей.

<picture>
  <source class="image" srcset="images/test2.jpg" type="image/jpeg" media="(min-width: 1900px)">
  <img class="image" src="images/test1.jpg">
</picture>

Answer 2

спасибо за помощь. Я нашел свою проблему: На самом деле я облажался две вещи 1) Я не совсем понял, что я всегда получаю изображение из тега src 2) Я не должен устанавливать класс для тега source и тега img, а только для тега img

это решение работает

<picture>
  <source srcset="/images/test2.jpg" type="image/jpeg" >
  <img class="image" src="/images/test1.jpg">
</picture>