在NextJS中如何展示API返回的image/jpeg类型Blob图片？

问题根源 #

你的代码存在两个核心问题：

1. 后端：Node.js的res.send()无法直接正确处理浏览器环境下的Blob对象，且未设置正确的响应头告知前端返回内容类型。
2. 前端：未将fetch响应正确转换为Blob就尝试创建对象URL。

后端修复方案 #

修改API路由，将Hugging Face返回的Blob转为Buffer，并设置正确的Content-Type响应头：

import { HfInference } from "@huggingface/inference";

export default async function generate(req, res) {
  try {
    const inference = new HfInference('[token]');
    const response = await inference.textToImage({
      model: "stabilityai/stable-diffusion-2",
      inputs: "award winning high resolution photo of a giant dragon/((ladybird)) hybrid, [trending on artstation]",
      parameters: {
        negative_prompt: "blurry",
      },
    });

    // 将Blob转换为Node.js支持的Buffer
    const imageBuffer = Buffer.from(await response.arrayBuffer());
    // 设置响应头，明确返回内容为JPEG图片
    res.setHeader('Content-Type', 'image/jpeg');
    res.status(200).send(imageBuffer);
  } catch (error) {
    // 正确返回错误信息给前端
    res.status(500).json({ error: '生成图片失败：' + error.message });
  }
};

前端修复方案 #

修改fetch调用逻辑，正确转换响应为Blob，并做好内存管理：

import { useState, useEffect } from 'react';

export default function ImageGenerator() {
  const [imageUrl, setImageUrl] = useState(null);
  const [errorMsg, setErrorMsg] = useState('');

  const handleGenerateImage = async () => {
    try {
      setErrorMsg('');
      const apiResponse = await fetch('/api/generateimageHG2');
      
      if (!apiResponse.ok) {
        const errData = await apiResponse.json();
        throw new Error(errData.error || '请求失败');
      }

      // 将API响应转换为Blob对象
      const imageBlob = await apiResponse.blob();
      // 创建图片对象URL
      const url = URL.createObjectURL(imageBlob);
      setImageUrl(url);
    } catch (err) {
      setErrorMsg(err.message);
    }
  };

  // 组件卸载时释放对象URL，避免内存泄漏
  useEffect(() => {
    return () => {
      if (imageUrl) {
        URL.revokeObjectURL(imageUrl);
      }
    };
  }, [imageUrl]);

  return (
    <div>
      <button onClick={handleGenerateImage}>生成图片</button>
      {errorMsg && <p style={{color: 'red'}}>{errorMsg}</p>}
      {imageUrl && <img src={imageUrl} alt="AI生成图" style={{maxWidth: '100%'}} />}
    </div>
  );
}

关键注意事项 #

• 后端必须设置Content-Type头，否则前端无法识别返回内容为图片格式。
• 使用URL.createObjectURL后，务必在组件卸载时调用URL.revokeObjectURL释放资源，防止内存泄漏。
• 前端要处理API响应的错误状态码，避免因后端报错导致前端逻辑异常。

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