无法在 Next JS 中显示来自 FastAPI 的 blob 图像

Question

所以我有自己的使用 FastAPI 构建的 API，它返回带有

的图像

return Response(content=img_byte_arr.getvalue(), media_type="image/jpeg")

FastAPI Swagger UI 中一切正常，正如我所看到的图像

然后我有一个 Next JS 服务器操作，它可以使用 wait fetch 正确获取 API，获取 blob 并将 ObjectURL 传递到客户端组件

const blob = await response.blob();
const imageBase64 = URL.createObjectURL(blob);
return imageBase64

现在的问题是，当我尝试在客户端上显示图像时，即使在我的 Vercel 开发环境中，我也收到错误

Not allowed to load local resource: blob:nodedata:3d26ac0d-f5fc-4161-a40f-2dfa21d3df1d

我无法理解为什么

Answer 1

arrayBuffer

对象

  const blob = await response.blob();
  let ab = await blob.arrayBuffer();
  let object = {
    image: Array.from(new Uint8Array(ab)),
    name: "image",
  };

  return object;

在客户端，我将 

arrayBuffer

转换为二进制数据，然后创建

imageURL

const imageStringify = await requestImg(data);
const binaryData = Buffer.from(imageStringify.image);

const imageBase64 = URL.createObjectURL(
  new Blob([binaryData.buffer], { type: "image/jpeg" } /* (1) */)
);