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

Question

到目前为止，我一直在使用下面的方法 [1] 在我的延迟加载的 img 标签上预加载所需的空 SVG 视图框比例，然后 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. 有没有什么方法可以用正确的语法达到类似的效果？

Answer 1

srcset 不允许该语法。改用单独的img 标签

Answer 2

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

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

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