React中导入Logo报错‘Module not found: Error: Can't resolve’原因排查

核心问题是文件相对路径错误。你在App.js中能正常导入Logo，说明App.js与assets文件夹的层级关系和Navbar.js不一致，导致当前导入路径无法定位到资源文件。

假设你的项目结构如下：

src/
├── App.js
├── assets/
│   └── images/
│       └── react-logo-small.png
└── components/
    └── Navbar.js

App.js和assets处于同级目录，所以./assets/images/react-logo-small.png的路径有效；但Navbar.js在components文件夹内，需要先回退到上一级目录才能找到assets，因此路径要改为../assets/images/react-logo-small.png。

修正后的Navbar.js代码： #

import React from 'react';
import Logo from '../assets/images/react-logo-small.png'

function Navbar() {
    return(
        <div className='nav_container'>
            <nav className='navbar'>
                <img src={Logo} alt="Logo"/>
                <h3 className='nav--logo_text'>ReactFacts</h3>
                <h4 className='nav--title'>React Course - Project 1</h4>
            </nav>
        </div>
    )
}

export default Navbar;

路径验证小技巧： #

• 打开Navbar.js所在的文件夹，手动梳理层级：每向上一级目录就添加一个../，直到定位到assets文件夹的位置。
• 也可使用绝对路径（Create React App中支持/src/assets/images/react-logo-small.png），但相对路径更适配项目结构的调整。

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