如何修复Next.js中静态导入图片的TypeScript错误

问题场景 #

在Next.js项目中使用TypeScript时，导入public/images/homeBg.jpg图片出现错误：

Cannot find module '/images/homeBg.jpg' or its corresponding type declarations

相关代码如下：

import { Layout } from '@common';
import Trips from '@ui/Trips/Trips';
import Image from 'next/image';
import bgImage from '/images/homeBg.jpg';
const HomePage = () => {
  return (
    <div className="relative h-screen w-full">
      <Image
        src={bgImage}
        fill
        className="-z-10 object-cover"
        alt="backgound_image_for_home_page"
      />
      <div className="mx-auto flex h-full w-full max-w-[2000px] flex-col space-y-10 px-7 py-36 lg:px-14">
        <h3 className="text-3xl font-normal leading-10 tracking-wider text-white lg:text-4xl">
          Welcome back, <br /> <span className="font-bold">Nedim!</span>
        </h3>
        <Trips />
      </div>
    </div>
  );
};

export default HomePage;

HomePage.layout = Layout;

解决方案 #

方案1：直接使用图片路径（推荐） #

Next.js的public目录下的资源可以直接通过绝对路径引用，无需import。修改代码如下：

import { Layout } from '@common';
import Trips from '@ui/Trips/Trips';
import Image from 'next/image';

const HomePage = () => {
  return (
    <div className="relative h-screen w-full">
      <Image
        src="/images/homeBg.jpg"
        fill
        className="-z-10 object-cover"
        alt="backgound_image_for_home_page"
      />
      <div className="mx-auto flex h-full w-full max-w-[2000px] flex-col space-y-10 px-7 py-36 lg:px-14">
        <h3 className="text-3xl font-normal leading-10 tracking-wider text-white lg:text-4xl">
          Welcome back, <br /> <span className="font-bold">Nedim!</span>
        </h3>
        <Trips />
      </div>
    </div>
  );
};

export default HomePage;

HomePage.layout = Layout;

这种方式符合Next.js资源引用规范，能直接规避TypeScript类型错误。

方案2：添加图片类型声明文件（若需import方式） #

如果坚持通过import引入图片，需为图片文件添加TypeScript类型声明：

1. 在项目根目录或src目录下创建types文件夹，新建images.d.ts文件，内容如下：

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

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

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

// 按需添加webp、svg等其他图片格式的声明

2. 确保tsconfig.json的include数组包含该类型文件，示例配置：

{
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "types/**/*.d.ts"]
}

重启TypeScript服务后，错误即可消除。

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