React TS项目导入public文件夹SVG提示Module not found报错如何解决

你当前使用的相对导入语法./common/HeaderBackground.svg是从当前MainPage.tsx所在的src/routeCollector/Page/MainPage目录下查找资源，并没有定位到public文件夹；同时public文件夹属于项目静态资源目录，webpack默认不会处理该目录下资源的import导入逻辑，两种因素共同导致了模块找不到的报错。

分两种使用场景处理：

方案1：保留SVG在public文件夹下 #

public文件夹下的静态资源无需import导入，直接通过根路径引用即可：

• 删除import HeaderBackground from "./common/HeaderBackground.svg";这行导入代码
• 修改img标签写法，直接填写public文件夹下的相对路径，若你的SVG存放在public/common/HeaderBackground.svg，写法如下：

<img src="/common/HeaderBackground.svg" alt="Logo" />

如果项目部署在域名的子路径下，需要加上PUBLIC_URL前缀避免路径404：

<img src={process.env.PUBLIC_URL + "/common/HeaderBackground.svg"} alt="Logo" />

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

移入src目录的SVG会被webpack压缩优化，还支持组件化调用，适配性更好：

• 将HeaderBackground.svg移动到当前MainPage.tsx同级的common目录下，也就是路径匹配为src/routeCollector/Page/MainPage/common/HeaderBackground.svg，你原有代码的导入逻辑就可以正常运行。
• 如果你使用的是Create React App等脚手架，还支持将SVG作为React组件导入，更方便自定义样式：

import { ReactComponent as HeaderBackground } from "./common/HeaderBackground.svg";
// 渲染时直接作为组件调用
<HeaderBackground />

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