如何在图片标签内使用 Base64 SVG 占位符

How to use a Base64 SVG placeholder inside a picture tag

到目前为止，我一直在使用下面的方法 [1] 在我的延迟加载 img 标签上预加载所需的空 SVG viewbox 比率，然后 javascript 用实际图像覆盖它们。这是为了使页面不会重新绘制并且看起来不那么紧张。根据以下文章，这适用于简单的 img 标签且没有错误：

[https://css-tricks.com/probably-dont-base64-svg/#article-header-id-2][1]

我遇到的问题是在 picture 标签内执行此操作。 srcset 属性 似乎不喜欢 base64，我收到以下错误：

Failed parsing 'srcset' attribute value since it has an unknown descriptor.
Dropped srcset candidate "data:image/svg+xml,%3Csvg"
  1. 这是怎么回事？
  2. 是否可以将此技术与 picture 标签 srcset 属性一起使用？
  3. 有没有什么方法可以用正确的语法达到类似的效果？

srcset 不允许该语法。使用单独的 img 标签代替

陷入与您相同的“srcset 中的 svg 占位符”问题。 实际上，您可以通过将“ ”替换为“%20”来解决它：

svgString = svgString.replace(/ /g,'%20');

并且您将拥有在视图框中设置的适当大小的容器。另外 Chrome 不会抛出错误。