时间戳

首页 > 解决方案 > IMG 标记中的 SVG 数据 URI 未在 IE11 上显示

image - IMG 标记中的 SVG 数据 URI 未在 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;">

检查小提琴

谢谢

标签： imagesvginternet-explorer-11data-uri

解决方案

解决了，

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

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

推荐阅读