Next.js 15项目部署到Vercel后动态生成图片无法渲染文本的问题求助

阿华AIGC实验室

2026-4-8

兄弟，我之前也碰到过几乎一模一样的坑！本地用sharp动态生成带文本的图片完全正常，结果一部署到Vercel，图片里的文字直接变成空白框，哪怕指定Arial这种大家觉得“肯定有”的系统字体也没用，折腾了好半天才搞明白问题出在哪，给你几个实用的排查和解决方向：

Vercel服务器缺字体文件：咱们本地系统里自带Arial这些字体，但Vercel用的是Linux服务器环境，默认没装多少常用的桌面端系统字体。你指定Arial的时候，sharp在Vercel上根本找不到对应的字体文件，就会 fallback 到一个缺失字体占位，自然显示成空白框。
最靠谱的解决办法是把需要的字体文件（比如Arial的.ttf或者.otf格式文件）放到项目里，比如建个public/fonts目录存起来，然后在sharp的文本配置里直接指定字体的绝对路径。示例代码大概是这样：
```
'use server'    
import sharp from 'sharp'    
import path from 'path'        

interface CreateArgs {    
  nomineName: string    
  awardName: string    
}

async function generateAwardImage(args: CreateArgs) {
  return sharp()
    .text({
      text: `${args.nomineName} 获得 ${args.awardName}`,
      font: path.join(process.cwd(), 'public/fonts/Arial.ttf'), // 用项目内的字体文件
      fontSize: 24,
      fill: { r: 0, g: 0, b: 0 },
      // 其他文本样式配置
    })
    .png()
    .toBuffer();
}
```
记得要把字体文件提交到Git里，跟着项目一起部署到Vercel哦。
Sharp与Vercel Serverless环境的适配：有时候默认安装的sharp版本可能和Vercel的Serverless函数环境不太兼容，你可以试试在package.json里锁定sharp的版本（比如用最新的稳定版），或者在next.config.js里添加一下sharp的相关配置，不过这个我当时没用到，主要还是字体的问题解决了就好。
路径问题要注意：别用相对路径指定字体，Vercel部署后的项目根路径和本地不一样，用process.cwd()拼接绝对路径才靠谱，不然sharp大概率找不到字体文件。