使用图片标签加载图像答案

【问题标题】：load images using the picture tag使用图片标签加载图像
【发布时间】：2019-09-28 03:18:11
【问题描述】：

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

【问题讨论】：

你如何知道你的图片是从<img src="/images/test.jpg">加载的。您正在为source 和img 设置相同的图像。尝试使用不同的图像。另请参阅 - w3schools.com/tags/tag_picture.asp
我刚刚使用 chrome 开发人员工具检查了它们，当检查 srcset 时，它在我的网站上标记了一个 0x0 字段，而在检查 src 时它标记了图像。但是我已经用两个不同的图像进行了测试，结果相同。我确实知道它也会同时加载，因为当我使用一个类设置一个固定值时，我有一个空的 0xwidth 字段，然后是一个带有来自 src 的图像的 image_heightxwidth 字段。
检查上面评论中提供的链接并尝试替换该示例中的图像。
hm 相同的结果我从 src 标签获取图像

标签： html image

【解决方案1】：

我不清楚这里的目标是什么。但是您错过了媒体属性。仅当周围没有媒体时，最后一个备用方案才有效。

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

【讨论】：

而且你肯定会从 src 标签中得到图像。

【解决方案2】：

感谢所有帮助。我发现了我的问题：其实我搞砸了两件事

我并没有真正明白我总是从 src 标签中获取图像
我不应该为源标签和img标签设置类，而只为img标签设置类

此解决方案有效

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

【讨论】：

您总是会从src 标记中获得img，因为它是一个备用元素，并且像普通的<img> 一样执行。如果所有其他 <source> 媒体查询都不正确，或者浏览器不支持图像类型，它只会加载正常的 img 标签。