使用Next.js+TypeScript+TailwindCSS时无法显示Public目录下图片的问题

问题概述 #

基于 TypeScript + TailwindCSS 的 Next.js 应用中，public/assets/images/me/me.png 路径下的图片无法正常渲染，已在 types 目录创建 images.d.ts 类型声明文件。

核心代码 #

import React from 'react';
import MyImage from "@/public/assets/images/me/me.png";
console.log(MyImage);

function Profile() {
  return (
    <div className='flex items-center gap-x-2 transition-colors duration-75 text-primary-foreground'>
      {/* 头像容器 */}
      <div className='relative w-[100px] h-[100px] rounded-full flex justify-center items-center bg-gradient-to-r from-blue-joust to-green-benzol'>
        <img src={MyImage} alt='Sujeet Photo' className='w-[95px] h-[95px] border-[0.2vw] border-blue-cosmos rounded-full object-cover'/>
        {/* 在线状态标识 */}
        <div className='w-3 h-3 rounded-full bg-green-benzol border-blue-cosmos absolute right-0 bottom-5'></div>
      </div>
      <div className="text-3xl font-medium">SUJEET SINGHANIYA</div>
    </div>
  )
}

export default Profile;

排查与解决步骤 #

1. 适配 Next.js 版本的图片引入规则 #

• App Router（Next.js 13+）：public 目录是静态资源根目录，无需 import 图片，直接使用根相对路径即可：

  <img src="/assets/images/me/me.png" alt='Sujeet Photo' className='w-[95px] h-[95px] border-[0.2vw] border-blue-cosmos rounded-full object-cover'/>
  

• Pages Router：import 方式支持，但需确保路径配置无误。

2. 确认类型声明文件生效 #

检查 types/images.d.ts 内容是否正确，确保 TypeScript 能识别图片模块：

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

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

同时在 tsconfig.json 中配置类型目录，让 TypeScript 扫描到该文件：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./types"]
  }
}

3. 校验路径别名配置 #

如果使用 @/public 别名，确认 tsconfig.json 中的路径映射正确：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/public/*": ["public/*"]
    }
  }
}

注意：Next.js 中直接使用 /assets/xxx 访问 public 下的资源是官方推荐方式，无需额外别名配置。

4. 清除缓存并重启服务 #

执行命令清除开发缓存，避免缓存导致的路径解析异常：

rm -rf .next
npm cache clean --force
npm run dev

5. 验证文件路径与大小写 #

确认 public/assets/images/me/me.png 文件真实存在，文件名（包括大小写）完全匹配——Linux/macOS 环境下路径区分大小写，Windows 不区分，但跨环境开发需统一规范。

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