React导入图片提示Can't resolve错误的问题求助

我在React项目里尝试导入图片，查了很多资料还是解决不了。项目目录结构如下：

我的代码：

import React from 'react';
import './header.css'
import people from '../assets/people.png';

报错信息：

ERROR in ./src/containers/header/header.jsx 6:0-42
Module not found: Error: Can't resolve '../assets/people.png' in 'C:\Users\ojadi\gpt3_jsm\src\containers\header'

排查步骤及解决办法 #

• 修正路径层级：当前代码用../assets只会走到src/containers目录，而assets在src根目录下，需要多退一级，正确路径为../../assets/people.png。修改后的导入代码：

  import people from '../../assets/people.png';
  

• 核对文件信息：确认src/assets文件夹下确实存在people.png，注意文件名大小写（部分打包工具会严格区分）和后缀名是否完全匹配。
• 检查webpack配置（自定义项目）：如果是手动配置的webpack项目，需确保已配置图片处理规则。安装必要依赖后，在webpack.config.js中添加：

  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  }
  

• 备选方案：使用public目录：将图片放到项目根目录的public文件夹下，直接通过绝对路径引用，无需导入：

  <img src="/people.png" alt="people" />
  

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