React报错：Cannot find module '../../assets/register-bg.png'或对应类型声明.ts(2307)

我在CSS声明中导入图片资源时遇到错误，代码如下：

import FooterBackgroundDesktop from "../../assets/register-bg.png";

"background-image": `url(${FooterBackgroundDesktop})`

路径和文件名均正确，但出现如下错误：

Cannot find module '../../assets/register-bg.png' or its corresponding type declarations.ts(2307)

解决方法： #

• 添加图片资源的类型声明文件
  在项目src目录下创建types文件夹，新建images.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识别类型文件
  打开tsconfig.json，检查include字段，确保包含类型声明文件所在路径：

  {
    "compilerOptions": {
      // 其他编译配置
    },
    "include": [
      "src/**/*",
      "src/types/**/*"
    ]
  }
  

• 框架适配（按需操作）

  • 若使用Create React App，默认已支持图片类型声明，若仍报错，可尝试更新react-scripts版本，或手动添加上述类型声明。
  • 若使用Vite+Vue/Vue3，Vite默认处理图片资源，类型问题同样通过添加上述.d.ts文件解决。

• 验证构建工具配置
  确保Webpack/Vite等构建工具已配置图片 loader（如file-loader、url-loader或Vite内置的资源处理），这样导入的图片会被正确转换为可识别的URL字符串，保证background-image属性生效。

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