NextJS+TypeScript中生成BlurURLData及数组对象访问问题

核心问题修正点 #

1. 遍历数组时直接访问certImage属性即可，无需用对象包裹
2. map回调需设为异步函数，同时要用Promise.all处理异步返回的Promise数组
3. 本地导入的图片在Next.js中是StaticImageData类型，需取其src属性作为fetch的路径
4. 错误处理要实际捕获并输出，避免静默失败

完整修正代码 #

1. 类型定义（TypeScript） #

先给数组对象定义类型，保证类型安全：

import type { StaticImageData } from 'next/image';

interface CertItem {
  name: string;
  certImage: StaticImageData; // 本地导入图片的标准类型
  link: string;
}

const objectArrs: CertItem[] = [
  {
    name: "titleOne",
    certImage: imageOne,
    link: "https://linktowebsite.com",
  },
  {
    name: "titleTwo",
    certImage: imageTwo,
    link: "https://linktowebsite.com",
  },
];

2. 生成BlurDataURL的异步函数 #

import getPlaiceholder from 'plaiceholder';

async function generateBlurDataUrls(items: CertItem[]) {
  try {
    // 用Promise.all等待所有异步任务完成
    const blurURLData = await Promise.all(
      items.map(async (item) => {
        // 访问本地图片的src属性作为请求路径
        const res = await fetch(item.certImage.src);
        const buffer = Buffer.from(await res.arrayBuffer());
        const { base64 } = await getPlaiceholder(buffer);
        
        // 返回包含原数据和模糊占位图的对象
        return {
          ...item,
          blurDataURL: base64,
        };
      })
    );
    return blurURLData;
  } catch (error) {
    console.error('生成模糊占位图失败:', error);
    // 出错时返回原数组，可根据业务需求调整
    return items;
  }
}

3. 在服务端获取数据（示例：getStaticProps） #

export async function getStaticProps() {
  const certsWithBlurData = await generateBlurDataUrls(objectArrs);
  return {
    props: { certs: certsWithBlurData },
  };
}

4. 在组件中使用next/image #

import Image from 'next/image';

export default function CertsPage({ certs }: { certs: (CertItem & { blurDataURL: string })[] }) {
  return (
    <div>
      {certs.map((cert, index) => (
        <a key={index} href={cert.link} target="_blank" rel="noopener noreferrer">
          <h3>{cert.name}</h3>
          <Image
            src={cert.certImage}
            alt={cert.name}
            width={500}
            height={300}
            placeholder="blur"
            blurDataURL={cert.blurDataURL}
          />
        </a>
      ))}
    </div>
  );
}

关键注意事项 #

• 本地导入的图片需通过src属性获取实际访问路径，不能直接传入fetch
• 异步生成模糊图的逻辑要放在服务端执行（如getStaticProps、getServerSideProps），客户端无法直接使用Buffer
• 必须用Promise.all处理异步map的结果，否则会得到一堆未resolved的Promise

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