Next.js遍历静态图片数组时next/image的blur占位符报错

问题分析 #

你遇到的报错提示Image with src "" has "placeholder='blur'" property but is missing the "blurDataURL" property，核心原因是某个Image组件的src被解析为空字符串，尽管你已经静态导入了图片，但可能存在以下几个潜在问题：

解决方案 #

1. 验证静态导入的图片对象有效性 #

先确认静态导入的图片是否正确加载，在certificates数组定义后添加日志检查：

console.log(scrumCourse);
// 正常输出应包含 src、width、height、blurDataURL 等属性

如果输出为undefined，说明图片路径错误（比如@/assets/images/scrumCert.webp拼写或目录结构不对），修正路径即可。

2. 确保数组存储完整的静态导入对象 #

你当前avatar: scrumCourse的写法是正确的，但如果误写成avatar: scrumCourse.src，会丢失Next.js自动生成的blurDataURL属性，直接导致报错。确认数组中存储的是完整的导入对象，而非仅src字段。

3. 排查数组中的空图片项 #

如果certificates数组里存在未设置avatar的元素，遍历渲染时会出现src为空的Image组件。确保数组中每个元素的avatar都指向有效的静态导入图片。

4. 移除冗余的外层循环 #

你的代码用[...new Array(10)].fill(0).map重复渲染了10次证书列表，这不仅冗余，还可能放大潜在问题。如果不需要重复渲染，直接保留内层遍历即可：

{certificates.map(certificate => (
  <Card key={certificate.name} className="max-w-[400px] md:max-w-md p-2 md:p-4 items-center transition duration-300 hover:rotate-1">
    <Link href={certificate.link} target="_blank" >
      <div className="relative w-[416px] h-[321.45px] object-cover">
        <Image
          src={certificate.avatar}
          alt={certificate.name}
          placeholder="blur"
          fill
          className="max-h-full rounded-3xl" />
      </div>
    </Link>
  </Card>
))}

5. 确认版本与格式兼容性 #

确保使用的Next.js版本在12及以上（该版本开始支持静态导入图片自动生成blurDataURL），且图片格式为jpeg、png、webp、avif（你使用的webp符合要求），排除动图的情况。

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