【React】如何在React中通过svg字符串加载图片

问题

在React中，对于本地的svg图像文件可以直接引用,然后在img标签中使用，就可以成功渲染。

import MySVG from './my-svg-file.svg';
function MyComponent() {
  return (
    <div>
      <h1>My SVG Example</h1>
      <img src={MySVG} alt="My SVG" />
    </div>
  );
}

但最近在项目中通过api获取到了svg字符串，需要渲染到页面上，直接像上面那样引用是失败的。

解决

正确做法是将svg字符串通过btoa()方法将字符串编码为base64编码的 ASCII 字符串，再通过Data URI加载图片。

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

这样就可以成功显示啦。

关于Data URI

Data URI scheme 简称 Data URI ，是在 RFC2397 中进行定义的。目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。以上方的 Data URI 链接为例：

<img src=“data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGlu……/>

我们可以看到它由 data，image/svg+xml，base64 以及后面的字符串组成。

data:[<mime type>][;charset=<charset>][;<encoding>],<encoded data>

这几部分分别为：

• data：表示取得数据的协定名称，表明这是一个 Data URI。
• mime type：数据类型名称，也是就是 image/svg+xml，如果传入的是个 png 图片，那么可以指定类型为 image/png。
• charset=：可不填，默认是 charset=US-ASCII 编码。
• base64：是数据的编码方法。
• encoded data：经过 base64 编码后的数据。