SVG路径解析错误：无法找到'../../assets/logo.svg'，修改路径无效求助

云上老周

2026-8-2

React项目中SVG资源路径解析失败的解决办法

问题描述

报错信息：

Error: Can't resolve '../../assets/logo.svg' in '/Users/ricaldito/Desktop/gpt3_jsm/src/components/navbar'

相关Navbar组件代码：

import React from 'react';
import { RiMenu3Line, RiCloseline } from 'react-icons/ri';
import logo from '../../assets/logo.svg';
import './navbar.css';

function Navbar() {
  return (
    <div className="gpt3__navbar">
      <div className="gpt3__navbar-links">
        <div className="gpt3__navbar-links_logo">
          <img src={logo} alt="logo" />
        </div>
      </div>
    </div>
  )
}

export default Navbar

已尝试修改路径但问题未解决，以下是具体解决步骤：

核对文件实际位置
先确认项目目录结构：Navbar组件在/src/components/navbar，../../assets/logo.svg对应的实际路径是/src/assets/logo.svg。检查该路径下是否存在logo.svg，注意文件名大小写（Mac/Linux系统区分大小写），比如Logo.svg和logo.svg会被视为不同文件。
配置绝对路径导入
避免相对路径层级混乱，可基于src目录配置绝对路径：
1. 在项目根目录创建jsconfig.json（TypeScript项目用tsconfig.json），写入以下内容：
```
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
```
1. 重启开发服务器后，直接用import logo from 'assets/logo.svg';导入资源。
检查webpack资源处理配置（自定义项目）
如果是手动配置webpack的项目，需确保已添加SVG处理loader（比如file-loader）：
```
module.exports = {
  module: {
    rules: [
      {
        test: /\.(svg)$/i,
        use: ['file-loader'],
      },
    ],
  },
};
```
若使用Create React App，默认已配置好SVG处理，可跳过此步骤。
改用public目录资源
将logo.svg放到项目根目录的public文件夹中，组件内直接引用：
```
<img src="/logo.svg" alt="logo" />
```
此方式无需import，直接基于public目录根路径引用。