使用图片标签加载图像

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标签的图片。如何使用图片标签正确实现此问题？

编辑：这就是我添加了较早定义图像宽度的类的方式，这导致了我在图像类中设置的宽度的空字段，并带有来自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. 我不应该为源标签和img标签设置类，而应该为IMG标签设置类

此解决方案起作用

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