React项目导入图片报错：Module not found: Can't resolve如何解决？

安全阿岳

2026-8-9

React导入图片报错的解决办法

问题重现

代码（NavBar.jsx）：

import React from "react";
import logo from "./logo.svg"

function NavBar() {
    return (
        <div className="navBar">
        <button>Manual</button>
        <button>Scenarios</button>
        <button><img src={logo}/></button>
        <button></button>
        <button></button>
        </div>
    );
}
export default NavBar;

编译错误：

Compiled with problems:
ERROR in ./src/components/NavBar.jsx 5:0-30
Module not found: Error: Can't resolve './logo.svg' in 'C:\Users\andri\Documents\myReact\rushing-ranges\src\components'

试过从images文件夹、src根目录导入均无效。

解决步骤

核对文件路径与拼写
先理清项目结构：
- 若logo.svg在src/images下，导入路径应为../images/logo.svg（因为NavBar在src/components，需要回退一级到src目录，再进入images文件夹）
- 若在src根目录，路径是../logo.svg
- 注意大小写敏感，Webpack会严格区分Logo.svg和logo.svg，同时检查文件名是否有拼写错误或多余空格。
Create React App项目无需额外配置Webpack
如果你是用Create React App初始化的项目，框架已经默认配置好图片加载器，不用修改webpack配置，重点排查路径问题即可。
尝试直接引用public文件夹的图片
把图片放到项目根目录的public文件夹中，无需导入，直接在img标签里写绝对路径：
```
<button><img src="/logo.svg" alt="logo" /></button>
```
清除缓存重新构建
运行以下命令清除缓存后重启项目：
```
npm start --reset-cache
```
或者手动删除node_modules/.cache文件夹后重新编译。