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)}`} />
我让用户上传一张 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)}`} />