html - 如何在图片标签内使用 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. 有没有办法用正确的语法达到类似的效果？

标签： htmlimagesvgbase64lazy-loading

Answer 1

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