NextJS 图像别名在子目录中的页面上不起作用

Question

我正在尝试为我的图像设置一个别名，这样我就可以 link 它们，而不管我的组件在哪里。

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

如您所见，我已经设置了一个别名，尝试了多种方法，甚至包括 public 路径，但是其中 none 似乎有效...

例如，在 {project}/pages/index.tsx 上，我必须 link 图像才能加载：

import Header from '@lib/components/Header';

<Header className="h-128" image="./images/hero.jpg">
...

// Header.tsx

import Image from 'next/image';
import { ReactElement } from 'react';

export interface HeaderProps {
    children?: ReactElement | ReactElement[];
    className?: string;
    image?: string;
}

const Header = ({ children, className, image }: HeaderProps) => {
    return (
        <section
            className={`m-0 flex relative after:shadow-vignette after:content-[''] after:w-full after:h-full after:absolute ${className}`}
        >
            <div className="absolute h-full w-full z-0">
                <Image unoptimized className="z-0" layout="fill" objectFit="cover" src={image} />
            </div>
            <div className="container text-center m-auto z-10">{children}</div>
        </section>
    );
};

export default Header;

当我尝试 link 到 {project}/pages/sub-directory/page-two.tsx

内的图像时，这会变得更加严重

Answer 1

compilerOptions.paths 是一个 TypeScript 设置，它不会影响 Next.js 或浏览器加载图像的方式。将这些图像放在 public/images/ 中，您可以像现在一样加载它们。

或者导入图像而不是仅仅使用字符串来识别它。

import img from '@images/hero.jpg';

const Asd = () => (
  <Image src={img} />
)

应该可以。

NextJS 图像别名在子目录中的页面上不起作用

NextJS image alias not working on page within sub-directories

next.js