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>

使用图片标签加载图像

2 个答案: