IMG 标签中的 SVG 数据 URI 未在 IE11 上显示

SVG data URI in IMG tag isn't showing on IE11

我让用户上传一张 SVG 图片,我正在尝试向他展示。

图像在 Edge、Firefox 和 Chrome 上显示良好,但在 IE11 上显示不佳。 当我进入调试模式时,IE 和 Chrome 上的数据 URI 似乎不同。 当我将 Chrome 中的数据 URI 复制到 IE 时,它正在工作。

问题是什么? 为什么 IE 会更改数据 URI?

这是代码

<img class="large-icon img large-icon-img user-img" id="large-icon" src="" style="height: 96px; width: 96px;">

勾选fiddle

感谢

解决了,

问题是要在 IE11 中使用数据 URI,URI 必须是 base64。 所以我获取了 SVG 数据并在其上使用了 'btoa' 函数并添加了 'svg+xml;base64' 作为他的 MIME 类型。

<img src={`data:image/svg+xml;base64,${window.btoa(data)}`} />