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

Question

Next.js 提供了一种非常全面的方法，从

/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,0,6,75,56,86,87,...] } />

我的错误与我如何处理

fs

给我的反馈有关。我是否需要将 jpeg 编码为

base64

才能下一步使用它？ 这个答案建议先进行字符串化，然后进行解析（对我来说不起作用）。或者也许我需要一个完整的端点来做到这一点？接下来不太清楚如何从 getStaticProps 获取 imagery 到它上面的组件中 - 也许你知道怎么做？

Answer 1

从

getStaticProps

返回的所有数据都需要是JSON可序列化的，所以是的，如果你想在那里返回图像，你需要对其进行base64编码（这对于大图像来说可能是一个问题）。 另一种解决方案（如果场景允许）不是使用

getStaticProps

来执行此操作，而是通过在页面加载后点击 API 在前端按需加载图像。

Answer 2

我最终在

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 一起使用时，会对用于处理 page 文件请求的无服务器函数施加硬性的

50MB 上限（压缩）。如果您正在制作 

[slug].js

 模板，则生成的每个页面的所有资源都将计入该上限。您在部署时会很快达到目标，因此请仔细检查自己。

2024 年 2 月更新：无服务器捆绑包大小现在可达 250MB