Nextjs 提供大量具有动态文件名的静态文件（图像）

Question

我有数百张图像，用于使用 nextjs 构建动态增长的图像库。图像位于公共文件夹内，可以使用

显示

import image1 from '../../public/image1.png'

// this works
<img src={image1.src} />

如何动态显示图像而不像这样预先为每个图像创建导入？

// doesnt work
let imgId = 5
<img src=`../../public/image${imgId}.png` />

我也尝试了内置的

Image

组件，但没有运气：

// doesnt work
<Image 
    src={"/image/" + imgId + ".png"}
    height="100" 
    width="100" 
    alt="image" 
/>

此外，使用

require.context()

的解决方案将不起作用，因为 nextjs 不使用 webpack。

Answer 1

公共目录中的任何内容都应该可以通过绝对路径访问。 如果 /public 目录中有一个“image.jpg”，应该可以通过 https://yourdomain/image.jpg.

访问它

// ✅ These work

<img src="image.jpg" />
<img src="/image.jpg" />
<Image src="/image.jpg" width={100} height={100} />


// ❌ These don't work (missing leading /)
<Image src="image.jpg" width={100} height={100}/>

Answer 2

基于here的答案，解决方案是使用API：

在

[image].ts

文件夹中创建一个名为

public/api/

的文件

import type { NextApiRequest, NextApiResponse } from 'next'

import fs from "fs";
import path from "path";

export default function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { images } = req.query
  res.setHeader("Content-Type", "image/jpg");
  const filePath = path.resolve(".", `src/public/img/ai/${image}`);
  const imageBuffer = fs.readFileSync(filePath);

  return res.send(imageBuffer);
}