React项目中无法使用assets文件夹内资源的求助

一、确认资源导入方式是否正确 #

1. 静态导入（推荐用于固定资源） #

在组件内直接导入资源，再通过变量引用：

// 导入图片
import todoIcon from '../assets/images/todo-icon.png';
// 导入音频
import notificationSound from '../assets/audio/notify.mp3';

// 使用图片
<img src={todoIcon} alt="Todo Icon" />
// 使用音频
<audio src={notificationSound} controls />

注意：导入路径要和你的文件层级匹配，比如组件在src/components下，assets在src/assets，路径需用../assets/xxx向上跳转层级。

2. 公共目录直接引用 #

如果把assets放在项目根目录的public文件夹下，无需导入，直接用绝对路径访问：

// 图片
<img src="/assets/images/todo-icon.png" alt="Todo Icon" />
// 音频
<audio src="/assets/audio/notify.mp3" controls />

二、排查路径与命名问题 #

• 文件名不能有空格、特殊字符（如中文、感叹号），且React对文件名大小写敏感，TodoIcon.png和todoicon.png会被识别为不同文件。
• 确认assets文件夹的位置：如果在src目录外，静态导入路径需要重新调整；如果在src内，确保组件到assets的相对路径正确。

三、自定义Webpack配置检查（非Create React App项目） #

如果是自己配置的Webpack，需确保添加了处理图片、音频的loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|mp3|wav)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'assets/',
            },
          },
        ],
      },
    ],
  },
};

配置完成后重启开发服务器生效。

四、针对你的Todo List项目的具体建议 #

先确认仓库中assets的实际位置：如果assets在src目录下，检查组件内的导入路径是否和层级匹配（比如Todo.jsx在src/components，导入src/assets下的资源需用../assets/xxx）。如果仍有问题，把你尝试过的导入代码贴出来，能更快定位问题。

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