如何从Nuxt3 API端点返回图片？调用异常排查

核心问题1：Content-Length与实际响应内容不匹配 #

你代码里设置的Content-Length是imageBuffer.length，但实际返回的是固定路径文件的流，两者字节长度几乎不可能一致。浏览器会严格校验这个头部，一旦实际传输字节数和声明的Content-Length不符，就会丢弃整个响应，表现为资源大小0KB。

核心问题2：逻辑矛盾——未使用获取到的imageBuffer #

你通过ProfileStore.ExtractImage(name)拿到了目标图片缓冲，但实际返回的是硬编码路径的文件，既违背了按name返回对应图片的业务逻辑，也加剧了Content-Length不匹配的问题。

核心问题3：$fetch调用未配置正确响应类型 #

默认情况下$fetch会尝试把响应解析为JSON，而图片是二进制流，直接解析会失败，导致无法正常读取响应内容。

修复后的后端代码 #

export default defineEventHandler(async (event) => {
  try {
    const user_id = event.context.session.id;
    const query = getQuery(event);
    const name = query.name as string|undefined;

    if (!name) throw new Error(`Invalid name`);
    
    // 获取目标图片缓冲
    const imageBuffer = await ProfileStore.ExtractImage(name);

    setHeader(event, 'Content-Type', 'image/jpeg');
    // 使用实际缓冲的长度作为Content-Length
    setHeader(event, 'Content-Length', imageBuffer.length.toString());
    setHeader(event, 'Cache-Control', 'private, max-age=0');
    
    // 基于拿到的缓冲创建流返回，而非固定文件
    return sendStream(event, require('stream').Readable.from(imageBuffer));

  } catch (error: any) {
    setResponseStatus(event, 500, error.message);
    return {
      message: error.message,
    };
  }
});

前端$fetch调用示例 #

// 配置响应类型为blob，让$fetch正确处理二进制流
const response = await $fetch('/your-api-endpoint?name=xxx', {
  responseType: 'blob'
});

// 将blob转换为可显示的图片URL
const imageUrl = URL.createObjectURL(response);
// 赋值给img标签的src属性即可显示
document.querySelector('img').src = imageUrl;

额外注意点 #

• 如果ProfileStore.ExtractImage返回的不是JPEG格式，要对应修改Content-Type（比如image/png），否则浏览器无法正确识别图片。
• 确保imageBuffer是有效的二进制图片数据，避免返回空缓冲或损坏内容。

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