请求协助解决导入Umma.PNG时出现的Module not found错误

先核对文件基础信息 #

• 确认Umma.PNG文件确实和Header.js在同一个src目录下，若图片在子文件夹（比如src/images），导入路径要改成./images/Umma.PNG
• 严格核对文件名大小写：Windows系统不区分文件名大小写，但React的模块解析是大小写敏感的，代码里写的Umma.PNG必须和实际文件名完全一致，不能写成umma.png或Umma.png

修正导入代码 #

React导入本地图片有两种可靠写法：

1. ES模块导入方式：

import UmmaImage from './Umma.PNG';
// 组件中使用：<img src={UmmaImage} alt="Umma" />

2. 直接使用require加载：

// 组件中直接引用
<img src={require('./Umma.PNG')} alt="Umma" />

排查工具链配置（非Create React App项目） #

如果是自定义webpack配置，要确保配置了图片文件的处理规则，添加如下loader配置：

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

用Create React App的话无需手动配置，工具链已内置相关处理。

清理缓存重启服务 #

• 关掉本地开发服务器，重新启动，避免缓存导致的路径解析异常；如果是Create React App，也可以删除node_modules/.cache目录后再重启

附错误截图：

内容的提问来源于stack exchange，提问作者Z.aid