<picture> 没有按照应有的方式工作 [重复]答案

【问题标题】：<picture> is not working the way it's supposed to be working [duplicate]<picture> 没有按照应有的方式工作 [重复]
【发布时间】：2022-01-25 15:59:42
【问题描述】：

下面是我的图片标签

<picture>
          <source
            media="(min-width: 1366px)"
            srcset="/LP/SpecialOffers/EC012722---ScrubBigOPromo-TILESDesktop content tile_grid.jpg?$staticlink$"
          >
          <source
            media="(min-width: 451px)"
            srcset="/LP/SpecialOffers/EC012722---ScrubBigOPromo-TILESTablet content tile_grid.jpg?$staticlink$"
          >
          <source
            media="(max-width: 450px)"
            srcset="/LP/SpecialOffers/EC012722---ScrubBigOPromo-TILESMobile content tile_grid.jpg?$staticlink$"
          >
          <img
            src="/LP/SpecialOffers/EC012722---ScrubBigOPromo-TILESDesktop content tile_grid.jpg?$staticlink$"
            alt="GET YOUR LIP FIX"
          >
</picture>

无论窗口大小如何，都会执行后备 img 标签。谁能告诉我这里有什么问题

【问题讨论】：

这能回答你的问题吗？ Image srcset definition not working as expected。它不使用图片标签，srcset 东西的工作方式与此类似，也许它正在工作，你只是在用你认为的一组不同的参数进行测试。
你怎么知道它不起作用？因为它对我有用，没有任何问题。 codepen.io/sohebm/pen/MWOWWqV
@Soheb 我检查了 codepen，它工作正常。但在我的情况下，我知道为什么会为所有屏幕加载后备图像。

标签： html css image

【解决方案1】：

URL 中的空格字符需要在 srcset 属性中转义为 %20，因为空格将标记 URL 与宽度或像素密度描述符之间的分隔。
它在src 中确实有效，因为只需要 URL 并且空格字符没有特殊含义，因此浏览器可以自动将其转换为 %20。

【讨论】：

我尝试给出 %20 而不是空格，但仍然得到相同的结果。甚至从文件名中删除了空格，但它不起作用
尝试直接从浏览器的地址栏中加载 URL，并确保您确实转义了所有空格字符。