You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

NextJS 14+Plaiceholder+Sharp部署Vercel时构建失败求助

Next.js 14.0.3 图片模糊组件部署Vercel失败问题

我在使用Next.js 14.0.3的Image组件实现动态图片模糊效果时,本地运行一切正常,但部署到Vercel时出现构建失败,报错信息如下:

corrupted size vs. prev_size
Error: Command "npm run build" exited with SIGABRT

已尝试的解决方案

  • ✅ 升级Plaiceholder和Sharp至最新版本并遵循官方文档操作,仍触发上述构建失败错误
  • ✅ 将Sharp降级至0.32.6,出现超时错误:
Task timed out after 10.01 seconds

注:该超时错误疑似与Prisma数据获取相关,但移除Sharp和Plaiceholder依赖后,Vercel部署可正常完成。

相关组件代码

模糊图片组件的实现代码如下:

import Image, { ImageProps } from "next/image";
import { getPlaiceholder } from "plaiceholder";

export default async function BlurImage({ src, alt, ...rest }: ImageProps) {
  if (typeof src !== "string") return <Image src={src} alt={alt} {...rest} />;
  const buffer = await fetch(src).then(async (res) =>
    Buffer.from(await res.arrayBuffer())
  );
  const { base64 } = await getPlaiceholder(buffer);

  return (
    <Image
      alt={alt}
      src={src}
      placeholder='blur'
      blurDataURL={base64}
      {...rest}
    />
  );
}

内容的提问来源于stack exchange,提问作者Reza Attar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.22 01:13:17