React项目本地图片导入遇TypeScript模块找不到错误求解决方案

方法1：添加自定义类型声明文件 #

• 在项目的src目录下创建一个后缀为.d.ts的类型声明文件，比如image.d.ts（文件名不限，只要后缀是.d.ts即可）
• 在文件中写入以下代码，声明图片文件的类型：

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

// 若需支持其他图片格式，可一并添加
declare module '*.jpg' {
  const value: string;
  export default value;
}

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

• 保存文件后，TypeScript就能识别这些图片模块，报错会自动消失。

方法2：修正图片导入语法 #

你当前使用的import {portfolio} from './portfolio.png'属于命名导入，但图片文件应该用默认导入，调整为：

import portfolio from './portfolio.png'

调整语法后配合上面的类型声明，TypeScript的语法检查会更规范。

方法3：确认tsconfig.json配置有效性 #

检查tsconfig.json的include数组，确保包含了类型声明文件的路径，比如：

{
  "compilerOptions": {
    // 项目其他配置项...
  },
  "include": [
    "src/**/*",
    // 若类型声明文件在项目根目录，添加 "./*.d.ts"
  ]
}

这样TypeScript才能扫描到你定义的自定义类型。

内容的提问来源于stack exchange，提问作者Joe Ellul-Turner