使用 Next.js 中的 getStaticProps 对来自公共文件夹的 static 图像进行编码

Question

Next.js 提供了一种从/public/文件夹（应用程序让您存储 static 资产）获取图像的非常全面的方法。 该模式是使用 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,
  };
}

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

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

我的错误与我如何处理fs给我的东西有关。 我是否需要将我的 jpeg 编码为base64才能让 Next 使用它？ 这个答案建议字符串化然后解析（对我不起作用）。 或者也许我需要一个完整的端点来做到这一点？ Next 不是很清楚如何将图像从 getStaticProps 获取到它上面的组件中——也许你知道怎么做？

Answer 1

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

Answer 2

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

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 一起使用时，将对用于处理page文件请求的无服务器 function 施加一个硬的 50MB 上限（压缩） 。 如果您正在使用[slug].js模板，则生成的每个页面的所有资产都将计入该上限。 你会在部署时很快击中它，所以请仔细检查自己。