Next.js动态加载带动态文件名的大量静态图片问题

方法1：直接使用正确的public路径（适用于已知图片命名规则的场景） #

public文件夹是Next.js的静态资源根目录，引用时无需写相对路径，直接从根目录开始定位：

普通img标签写法 #

let imgId = 5
// 正确路径：public下的image5.png直接写为 /image5.png
<img src={`/image${imgId}.png`} alt="动态图片" />

Next.js Image组件写法 #

确保src是从public根目录出发的绝对路径，同时匹配图片实际存放位置：

import Image from 'next/image'

let imgId = 5
<Image 
  src={`/image${imgId}.png`} // 若图片在public/image子文件夹下，路径改为 /image/${imgId}.png
  height={100} 
  width={100} 
  alt="动态图片" 
/>

注意：如果图片存放在public的子文件夹（如public/images），路径要对应调整，且必须保证文件真实存在，否则会出现404错误。

方法2：静态生成时自动读取图片列表（适用于图片动态增长、需自动遍历的场景） #

如果图片会持续新增，且需要自动获取所有图片文件名，可以通过Node.js的fs模块读取public目录下的文件：

Pages Router 写法 #

// pages/gallery.js
import fs from 'fs/promises'
import path from 'path'
import Image from 'next/image'

export async function getStaticProps() {
  // 定义图片所在的public子目录路径
  const imageDir = path.join(process.cwd(), 'public', 'images')
  // 获取目录下所有文件
  const imageFiles = await fs.readdir(imageDir)
  // 过滤出png格式的图片文件
  const imageNames = imageFiles.filter(file => file.endsWith('.png'))

  return {
    props: { imageNames }, // 将文件名列表传递给组件
  }
}

export default function Gallery({ imageNames }) {
  return (
    <div className="gallery">
      {imageNames.map((imgName) => (
        <Image
          key={imgName}
          src={`/images/${imgName}`}
          height={100}
          width={100}
          alt={imgName}
        />
      ))}
    </div>
  )
}

App Router（Next.js 13+）写法 #

// app/gallery/page.js
import fs from 'fs/promises'
import path from 'path'
import Image from 'next/image'

export default async function GalleryPage() {
  const imageDir = path.join(process.cwd(), 'public', 'images')
  const imageFiles = await fs.readdir(imageDir)
  const imageNames = imageFiles.filter(file => file.endsWith('.png'))

  return (
    <div className="gallery">
      {imageNames.map((imgName) => (
        <Image
          key={imgName}
          src={`/images/${imgName}`}
          height={100}
          width={100}
          alt={imgName}
        />
      ))}
    </div>
  )
}

关于require.context的补充说明 #

Next.js Pages Router默认基于Webpack构建，是支持require.context的，之前没生效可能是路径错误：

// 示例：读取public/images下的所有png图片
const images = require.context('../../public/images', false, /\.png$/)
const getImagePath = (name) => images(`./${name}`).default.src

// 使用方式
<img src={getImagePath(`image${imgId}.png`)} alt="" />

但App Router使用TurboPack时，require.context不再支持，建议改用上述fs读取方案。

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