在 Next.js 中使用 getStaticProps 对公共文件夹中的静态图像进行编码

如何解决在 Next.js 中使用 getStaticProps 对公共文件夹中的静态图像进行编码

Next.js lays out a pretty comprehensive way 从 /public/ 文件夹（应用程序在其中存储静态资产）获取图像。该模式是使用来自 Node 的 fs 并在 getStaticProps 中进行提取。

我的尝试：

export async function getStaticProps({ params,preview = false,previewData }) {
  const cityData = dataFiltered.find( city => city.citySlug === params.slug )
  const cityMapImagePath = path.join(process.cwd(),`/public/static-maps/${cityData.imgPath}`)
  const cityMapImageRes = await fs.readFile(cityMapImagePath)
  const cityMapImageProcessed = JSON.stringify(cityMapImageRes)

  return {
    props: {
      preview,cityData: cityData,cityMapImage: cityMapImageProcessed
    },revalidate: 60,};
}

此代码有效，但当我在组件中引用该对象时，它返回一个非常奇怪的响应：

<img src="{ "type":"Buffer","data":[255,216,255,224,6,75,56,86,87,...] } />

我的错误与我如何处理 fs 返回给我的内容有关。我是否需要将 jpeg 编码为 base64 才能让 Next 使用它？ This answer 建议字符串化然后解析（对我不起作用）。或者也许我需要一个 full blown endpoint 来做到这一点？ Next 不太清楚如何从 getStaticProps 获取 imagery 到它上面的组件中 - 也许你知道怎么做？

解决方法

从 getStaticProps 返回的所有数据都需要是 JSON 可序列化的，所以是的，如果你想在那里返回图像，你需要对它进行 base64 编码（这对于大图像来说可能是一个问题）。另一种解决方案（如果情况允许）不是使用 getStaticProps 来完成，而是在前端按需加载图像，在页面加载后点击 API。

我最终为 getStaticProps 中的提取做了什么：

export async function getStaticProps({ params,preview = false,previewData }) {
  const cityData = dataFiltered.find( city => city.citySlug === params.slug )
  const cityMapImagePath = path.join(process.cwd(),`/public/static-maps/${cityData.imgPath}`)
  let cityMapImageRes,cityMapImageProcessed

  try {
    cityMapImageRes = await fs.readFile(cityMapImagePath)
    cityMapImageProcessed = Buffer.from(cityMapImageRes).toString('base64')
  } catch {
    cityMapImageProcessed = null
  }

  return {
    props: {
      preview,cityData: cityData,cityMapImage: cityMapImageProcessed
    },revalidate: 60,};
}

还要确保在组件中，您将图像源正确编码为带有 base64 前缀的 data:image/png;base64,。这是一个愚蠢的错误，花了我一个小时的调试时间：

<img src={`data:image/png;base64,${cityMapImage}`} alt='Alt text here' />

最后，还要注意 Next.js 与 Vercel 一起使用时会强加一个硬 50MB cap (compressed) on the serverless function 用于处理您的 page 文件请求。如果您正在制作 [slug].js 模板，则生成的每个页面的所有资产都将计入该上限。部署时您会很快完成，因此请仔细检查自己。