React项目Toolbar组件导入SVG图片提示Failed to compile编译错误如何解决

• 相对路径不匹配：你当前写的./assets/logo.svg是相对于Navbar.js所在的src/layout目录解析的，系统找不到该路径下的对应文件。
• 文件名/文件夹名拼写或大小写错误：部分构建工具对路径大小写敏感，若实际文件名为Logo.svg、assets文件夹名拼写错误，都会触发该报错。
• SVG文件确实不存在：文件被误删、移动到其他目录，或实际后缀为svg.png等非svg格式，都会导致无法识别。
• 非CRA创建的自定义配置项目：缺少解析SVG的webpack loader，无法识别svg模块。

1. 先核对SVG文件的实际存放路径：
   • 如果文件实际存放在src/layout/assets/logo.svg：检查文件夹名、文件名是否和导入语句完全一致，大小写完全匹配即可。
   • 如果文件实际存放在src/assets/logo.svg（项目公共assets目录）：将导入语句修改为：

     import Logo from '../assets/logo.svg';
     

2. 也可以用React组件的方式导入SVG（Create React App 默认支持该写法）：

   // 导入修改为
   import { ReactComponent as Logo } from '../assets/logo.svg';
   // 使用时直接调用组件，不需要img标签
   <Toolbar>
     <div>
       <Logo alt="logo" />
     </div>
   </Toolbar>
   

3. 自定义webpack配置的项目，先安装svg解析依赖：

   npm install @svgr/webpack file-loader --save-dev
   

   再在webpack配置的module.rules中添加规则：

   {
     test: /\.svg$/,
     use: ['@svgr/webpack', 'file-loader']
   }
   

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