React项目引用public目录下SVG图片不显示，该如何解决？

React项目中public目录下的静态资源在项目编译运行时，会被直接托管到服务的根路由下，你当前写的../public/myImage.svg是基于源码文件MyModal.jsx所在的src目录的相对路径，项目打包后源码的目录结构不会被保留，这个路径无法匹配到打包后的资源地址，因此图片无法加载。

方法1：直接引用public目录资源 #

public下的资源不需要加public层级，直接写根路径即可：

<Modal>
  <img src="/myImage.svg" alt="" />
  <p>done</p>
</Modal>

如果你的项目是部署在域名的二级子路径下，可以配合process.env.PUBLIC_URL使用，避免部署后路径不匹配：

<img src={process.env.PUBLIC_URL + '/myImage.svg'} alt="" />

这种方式适合不需要额外处理的静态资源，比如全站通用的favicon、大体积的图片资源等。

方法2：将SVG移入src目录导入使用（更推荐） #

1. 将myImage.svg移动到src目录下，比如新建src/assets目录存放
2. 在MyModal.jsx顶部导入SVG资源：

import MyImage from './assets/myImage.svg'

3. 替换img标签的src属性：

<Modal>
  <img src={MyImage} alt="" />
  <p>done</p>
</Modal>

这种方式的优势是打包时会自动对资源添加哈希后缀避免缓存问题，同时如果路径写错会在编译阶段就抛出错误，不会等到上线才发现资源缺失。

内容的提问来源于stack exchange，提问作者Sai Krishnadas