时间戳

首页 > 解决方案 > 使用图片标签加载图像

html - 使用图片标签加载图像

问题描述

我目前尝试将图片标签用于网站。这是我当前的代码（图片位于 /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>

标签： htmlimage

解决方案

我不清楚这里的目标是什么。但是您错过了媒体属性。最后的回退仅在周围没有媒体时才有效。

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

推荐阅读