NextJS中从API响应渲染图片问题：仅下载Base64文件而非显示图片

我来帮你捋清楚问题出在哪，以及怎么修复！你遇到的核心问题是对Base64图片数据的处理流程出错，导致浏览器无法正确解析为图片资源。

先拆解你之前代码的问题点： #

1. 最初版本的错误：你直接返回Base64字符串，还把Content-Type设成了image/png:Base64——这不是合法的MIME类型，浏览器自然会把它当成未知文件触发下载。
2. 修改后版本的错误：
   • 先把带前缀的Base64字符串用Buffer.from(..., 'base64').toString()转成普通字符串，这一步直接打乱了二进制图片数据的结构。
   • 替换Base64前缀的时机错误，应该先去掉data:image/png;base64,前缀再解码，而不是解码后再处理。
   • Content-Length用了字符串长度而非二进制Buffer的长度，导致浏览器无法读取完整的图片数据。

正确的处理流程 #

因为你的数据库里存的是完整的data:image/png;base64,...格式字符串，正确的处理步骤应该是：

1. 从数据库取出图片内容字符串
2. 移除开头的data:image/png;base64,前缀，得到纯Base64编码部分
3. 将纯Base64字符串解码成二进制Buffer
4. 设置正确的响应头，把Buffer返回给客户端

修正后的API代码 #

export default async function handler(req: NextApiRequest, res: NextApiResponse) { 
  const prisma = new PrismaClient();
  if (req.method === "GET") { 
    try {
      const { image_id } = req.query;
      // 先校验图片ID的合法性
      if (!image_id || isNaN(parseInt(image_id as string))) {
        return res.status(400).json({ error: "Invalid image ID" });
      }

      const image = await prisma.images.findFirst({ 
        where: { imageId: parseInt(image_id as string) } 
      });

      if (!image) {
        return res.status(404).json({ error: "Image not found" });
      }

      // 1. 移除Base64前缀
      const base64Prefix = 'data:image/png;base64,';
      if (!image.content.startsWith(base64Prefix)) {
        return res.status(500).json({ error: "Invalid image content format" });
      }
      const pureBase64 = image.content.slice(base64Prefix.length);

      // 2. 将纯Base64解码成二进制Buffer
      const imageBuffer = Buffer.from(pureBase64, 'base64');

      // 3. 设置响应头并返回Buffer
      res.writeHead(200, {
        'Content-Type': 'image/png',
        'Content-Length': imageBuffer.length,
        // 可选：添加缓存头让浏览器缓存图片，提升性能
        'Cache-Control': 'public, max-age=31536000'
      });
      res.end(imageBuffer);
    } catch (error) {
      console.error("Error fetching image:", error);
      res.status(500).json({ error: "Internal server error" });
    } finally {
      // 记得断开Prisma连接，避免资源泄漏
      await prisma.$disconnect();
    }
  } else { 
    res.status(405).json({ error: "Method not supported by API endpoint" }); 
  } 
}

额外注意事项 #

• 你之前在next.config.js里配置的Content-Type可以删掉了，直接在API里设置响应头更精准，避免全局配置冲突。
• 新增的错误处理逻辑能帮你快速排查问题（比如图片不存在、格式错误、数据库异常等）。
• 测试时直接访问API URL，浏览器应该会直接显示图片而非下载。如果仍有问题，可以打开浏览器开发者工具的Network标签，查看响应头和响应内容，确认是否返回了正确的二进制数据。

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