如何在 IE 9+ 中将按钮的背景图像设置为 base64 编码图像

Question

我的网页中有一个按钮，我想将其背景图像设置为base64编码的数据URI，如下所示：

<button type="button" disabled="true" style="width: 350px; height: 220px; background-image: url(&quot;data:image/png;base64, Qa=...;);"></button>

上面的按钮适用于chrome，Firefox和IE11，但不适用于IE9。按钮显示，但未显示背景图像。那么如何让它在IE9中工作呢？

请注意，所有谷歌结果都显示了如何支持 IE8+ 或 svgs，我想要的是使用 base64 数据 URI 在 IE9 中支持。

Answer 1

根据 https://caniuse.com/#feat=datauri，数据URI可以在IE8及更高版本中使用，但需要注意的是，对于IE8，最大URI长度为32KB。这应该在IE9中工作，就像在IE11中一样，但不要使用"并确保在第一个逗号之后或值中的其他任何地方都没有空格：

<button type="button" disabled="true" style="width: 350px; height: 220px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC);"></button>