Next.js Image组件使用tsconfig路径别名无效问题求助

问题根源 #

tsconfig中的paths配置是给TypeScript/JavaScript的模块导入（比如import Button from '@/UIElm/Button'）设计的，Next.js的Image组件src属性的静态资源路径解析逻辑完全独立，不会读取tsconfig的别名规则，所以直接写@/assets/xxx会失效。

可行解决办法 #

方法1：使用public根目录绝对路径 #

public文件夹是Next.js的静态资源根目录，直接以/assets开头写路径即可：

<div className={style.images}>
    <Image alt="app screenshot" src="/assets/open-account/screenshot1.svg" fill />
</div>

方法2：统一管理静态资源路径常量 #

创建一个常量文件集中管理资源路径，避免重复书写：

1. 在项目中新建文件（比如src/constants/assets.ts）：

export const ASSETS_BASE = '/assets';

2. 在组件中导入并使用：

import { ASSETS_BASE } from '@/constants/assets';

<div className={style.images}>
    <Image 
        alt="app screenshot" 
        src={`${ASSETS_BASE}/open-account/screenshot1.svg`} 
        fill 
    />
</div>

方法3：自定义Webpack别名（适用于模块导入场景） #

如果需要通过import方式引入静态资源，可在next.config.js中配置Webpack别名，配合tsconfig的paths实现一致体验：

1. 更新next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias['@/assets'] = `${__dirname}/public/assets`;
    return config;
  },
}

module.exports = nextConfig;

2. 保持tsconfig的paths不变，之后通过导入方式获取资源路径再传给Image组件：

import screenshot from '@/assets/open-account/screenshot1.svg';

<div className={style.images}>
    <Image alt="app screenshot" src={screenshot} fill />
</div>

内容的提问来源于stack exchange，提问作者erff-on