在Next.js中使用Plaiceholder转本地图片为Base64的问题求助

一、动态支持多张图片生成对应blurDataURL #

将单路径处理逻辑改为路径数组批量处理，使用Promise.all并行生成所有图片的占位信息，图片路径可以从配置文件、CMS接口、动态路由参数等任意来源动态获取，灵活调整即可，参考实现代码如下：

// 可替换为你的动态图片路径获取逻辑，比如从后端接口拉取图片列表
const getDynamicImagePaths = async () => {
  return ["/assets/pic1.jpg", "/assets/pic2.jpg", "/assets/pic3.jpg"]
}

export const getStaticProps = async () => {
  const imagePaths = await getDynamicImagePaths()
  // 批量处理所有图片生成base64占位图
  const imagePropsList = await Promise.all(
    imagePaths.map(async (path) => {
      const { base64, img } = await getPlaiceholder(path, { size: 10 })
      return {
        ...img,
        blurDataURL: base64,
      }
    })
  )

  return {
    props: {
      imagePropsList,
    },
  };
};

// 页面组件遍历渲染所有带模糊占位的图片
const PageBase64Multi = ({ imagePropsList }) => (
  <>
    {imagePropsList.map((imageProps, index) => (
      <Image key={index} {...imageProps} placeholder="blur" />
    ))}
  </>
);

二、fs not found报错解决 #

报错原因 #

fs是Node.js专属的文件系统模块，仅能在服务端运行环境调用，出现该报错说明你把getPlaiceholder的调用逻辑写在了客户端运行的代码中。

解决方法 #

• 所有getPlaiceholder调用必须放在服务端运行的代码段中：Pages Router 版本仅可放在getStaticProps、getServerSideProps内；App Router 版本必须放在服务端组件，或顶部标注了'use server'的服务端函数中，禁止在标记了'use client'的客户端组件内直接调用。
• 如果处理的是远程外链图片，建议先拉取图片转为Buffer再传入处理，避免触发本地fs读取逻辑，参考代码如下：

import fetch from 'node-fetch'
import { getPlaiceholder } from "plaiceholder";

const getRemoteImagePlaceholder = async (imgUrl) => {
  const res = await fetch(imgUrl)
  const buffer = await res.buffer()
  const { base64, img } = await getPlaiceholder(buffer, { size: 10 })
  return { ...img, blurDataURL: base64 }
}

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