如何从Next.js API返回图片并在浏览器中直接展示？

我调用自建的Next.js接口返回图片并嵌入网站，但图片会直接被下载，没法在浏览器窗口显示。现有代码如下：

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export const GET = async (_req: NextRequest) => {

  const res = await fetch("https://picsum.photos/200/300");
  const blob = await res.blob();

  const headers = new Headers();

  headers.set("Content-Type", "image/*");
  
  return new NextResponse(blob, { status: 200, statusText: "OK", headers });
};

请问怎么修改，让API返回的图片能像访问www.mywebsite.com/myphoto.png那样在浏览器里渲染？

解决方法 #

问题出在两个关键头部设置上：

• 你用了image/*这种通配符类型，浏览器无法精准识别图片格式，可能触发下载行为
• 缺少Content-Disposition: inline头部，这个头部明确告诉浏览器要内联显示资源，而不是下载

修改后的代码如下：

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export const GET = async (_req: NextRequest) => {
  const res = await fetch("https://picsum.photos/200/300");
  
  // 直接复用原响应的Content-Type，保证类型准确
  const contentType = res.headers.get("Content-Type") || "image/png";
  
  const headers = new Headers();
  headers.set("Content-Type", contentType);
  // 添加内联显示的头部
  headers.set("Content-Disposition", "inline");

  // 把原响应的body直接转发，比转成blob更高效
  return new NextResponse(res.body, { 
    status: 200, 
    statusText: "OK", 
    headers 
  });
};

关键修改说明： #

1. 复用原响应的Content-Type：从picsum返回的响应里直接获取正确的MIME类型（比如image/jpeg或image/png），避免通配符导致的识别问题
2. 添加Content-Disposition: inline：强制浏览器在窗口内显示图片，而不是触发下载
3. 直接转发响应体：不需要把响应转成Blob，直接用res.body更高效，减少内存开销

这样修改后，访问你的API接口时，浏览器就会像显示普通图片URL一样，直接在页面内渲染图片了。

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