React+TypeScript项目引入PNG图片报错：找不到对应模块

核心问题 #

你犯了重复处理路径的错误：import image from '../../images/profile.png' 已经让Webpack将图片处理为最终的静态资源路径（即报错信息里的/static/media/profile.61e9dd382cf050df64b8.png），但你又把这个处理后的路径传给require()——而require()需要的是项目源文件的相对路径，不是编译后的资源路径，因此导致找不到模块的报错。

正确用法 #

直接将import进来的image变量传给Image组件的src属性即可，无需嵌套require()：

import image from '../../images/profile.png';

// 正确写法
<Image src={image} alt="profile"/>

额外检查项 #

• 确认react-app-env.d.ts的位置：必须放在项目的src目录下，TypeScript才能自动识别该声明文件。
• 声明文件内容完整性：如果需要支持其他图片格式，可以补充声明：

declare module "*.png";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.svg";

• 验证图片路径准确性：确保import中的相对路径和图片实际存放路径一致，注意Linux/macOS环境下路径区分大小写。

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