HTML <picture> 标签和常见“问题”

Answer 1

你的想法没有问题。您的图像链接可能有问题。因此，您必须通过单击检查器内的链接来检查图像是否在新选项卡中打开。如果图像未作为预览出现，则说明链接不正确。

只有在

max-width

方法中，您必须将较小尺寸的图像放在顺序中的前面，然后将较大尺寸的图像放在后面，以便图像正确且逐渐地显示。

<picture>
  <source alt="medium" srcset="https://placehold.co/600x400/orange/white" media="(max-width: 650px)">
  <source alt="large" srcset="https://placehold.co/600x400/red/white" media="(max-width: 850px)">
  <img src="https://placehold.co/600x400/blue/white" alt="A description of the image.">
</picture>