createObjectURL 错误：`参数必须是 Blob 的实例。收到 Blob 的实例`

Question

我有一条快速路线，其中包含以下内容：

let result = await fetch("http://someurl");
result = await result.blob();
console.log(result)
const img = URL.createObjectURL(result);

这会产生以下错误（第 4 行）：

TypeError: The "obj" argument must be an instance of Blob. Received an instance of Blob

这里发生了什么？

如果有帮助，console.log 的结果是：

Blob {
  [Symbol(type)]: 'image/png',
  [Symbol(buffer)]: <Buffer 89 50 4e  ... 481501 more bytes>
}

并且获取路由转到另一个调用的 Express 应用程序res.sendFile(myfilepath)

Answer 1

服务器端相当于：

let result = await fetch("http://someurl");
result = await result.blob();
console.log(result)
const img = URL.createObjectURL(result);

是

let result = await fetch("http://someurl");
result = await result.arrayBuffer();
console.log(result)
const img = Buffer.from(result).toString("base64"));

然后图像在客户端呈现类似于：

<img src="data:image/png;base64, <%= img %>">

对于本例，使用 EJS；这里的重点是将图像数据转换为 Base-64 编码文本，然后可以使用图像数据 URI 进行渲染（ https://css-tricks.com/data-uris/ )进行渲染

请注意，只有当获取图像数据需要某种服务器端身份验证时才需要这种跳环，就像在大多数情况下您只需这样做：

let result = await fetch("http://someurl");
result = await result.blob();
console.log(result)
const img = URL.createObjectURL(result);

我有以下（精简）代码，其中图像只有在经过身份验证后才能访问：

let result = await fetch("http://someurl");
result = await result.arrayBuffer();
console.log(result)
const img = Buffer.from(result).toString("base64"));