Next.js Image组件如何使用相对路径？动态路由图片加载疑问

方案1：将图片移至public目录，直接用绝对路径访问 #

把图片放到项目根目录的public/assets/products/Hammer/文件夹下，就能直接通过根路径引用，无需相对路径或require：

import Image from 'next/image';

export default function singleProductPage({ params }) {
  const { product_code } = params;
  const imagePath = `/assets/products/Hammer/${product_code}.jpg`;

  return (
    <div>
      <Image src={imagePath} width={300} height={300} alt="产品图片" />
    </div>
  );
}

这是最省心的方式，Next.js会自动处理public目录下资源的优化、缓存等操作。

方案2：标记页面为Client Component，提取图片路径 #

如果图片必须放在src/assets目录下，给页面加上'use client'指令转为客户端组件，再从require返回的模块对象里取.default属性拿到实际路径：

'use client';
import Image from 'next/image';

export default function singleProductPage({ params }) {
  const { product_code } = params;
  const imagePath = require(`../../../../assets/products/Hammer/${product_code}.jpg`).default;

  return (
    <div>
      <Image src={imagePath} width={300} height={300} alt="产品图片" />
    </div>
  );
}

转为客户端组件后，模块对象的传递限制就失效了，同时.default能拿到纯路径字符串，不会触发警告。

方案3：预生成静态路径（适合产品编码有限的场景） #

如果你的产品编码是可枚举的固定集合，用generateStaticParams预加载所有可能的产品编码，提前构建动态路由页面：

import Image from 'next/image';
import fs from 'fs/promises';
import path from 'path';

export async function generateStaticParams() {
  const dirPath = path.join(process.cwd(), 'public/assets/products/Hammer');
  const files = await fs.readdir(dirPath);
  return files.map(file => ({
    product_code: file.replace('.jpg', '')
  }));
}

export default function singleProductPage({ params }) {
  const { product_code } = params;
  const imagePath = `/assets/products/Hammer/${product_code}.jpg`;

  return (
    <div>
      <Image src={imagePath} width={300} height={300} alt="产品图片" />
    </div>
  );
}

这种方式适合静态生成场景，Next.js会提前构建所有动态路由页面，同时保证图片路径的正确性。

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