React导入图片出现TypeError警告，求解决方法

问题根源 #

这个TypeError: Type {} is not assignable to type string | undefined警告，是因为项目的类型检查机制（哪怕是JS项目，VS Code的TypeScript服务或启用了checkJs配置）无法正确识别图片资源的导入类型，误将图片导出值判定为{}类型，和img标签src属性要求的string | undefined类型不匹配。

解决方案 #

1. 添加自定义类型声明文件 #

在项目src目录下创建images.d.ts文件，写入以下内容：

declare module '*.jpeg' {
  const value: string;
  export default value;
}

declare module '*.jpg' {
  const value: string;
  export default value;
}

// 按需添加其他图片格式的声明
declare module '*.png' {
  const value: string;
  export default value;
}

该文件会告诉TypeScript：所有指定格式的图片文件，导入后导出的是字符串类型（即图片打包后的访问路径）。

2. 确保类型文件被识别 #

如果项目有tsconfig.json，检查include配置是否包含该类型文件：

{
  "compilerOptions": {
    // 其他原有配置
    "checkJs": true // 若启用了JS文件的类型检查
  },
  "include": [
    "src/**/*",
    "src/images.d.ts" // 保证路径和实际文件位置一致
  ]
}

如果没有tsconfig.json，直接把images.d.ts放在src目录下，VS Code的TypeScript服务会自动识别。

3. 保留原导入方式 #

无需改用require，继续使用ES模块导入即可：

import profilePic from './assets/profile.jpeg';

此时类型系统会正确识别profilePic为字符串类型，警告自动消除。

补充说明 #

如果是Create React App创建的项目，原本自带图片资源的类型定义，若出现此问题，大概率是自定义webpack配置或类型文件丢失导致，添加上述自定义类型文件即可修复。

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