使用 XHR 加载图像，但没有将 responseType 设置为 blob

Question

我有这种情况，我使用 XMLHttpRequest 加载图像但没有将 responseType 设置为 blob。所以我收到一个字符串

我的问题是，在这种情况下是否仍然可以渲染图像？

例如，我尝试将此字符串转换为 Blob

out = new Blob([imageString],  { type: 'image/png' });

但这不会呈现预期的图像。有什么建议吗？

DEMO

这就是我的节点后端如何将该图像发送到浏览器

app.get("/binary/*", (req: express.Request, res: express.Response) => {
  const file = binaryPath + '/test.jpg';
  res.sendFile(file);
});

Answer 1

终于明白了：如果你不想拥有xhr.responseType = 'blob'并且你想从接收到的数据中创建一个url，那么你需要设置xhr.responseType = 'arraybuffer'。这允许将二进制 xhr.response 转换为 blob，然后创建 URL.createObjectURL。

关键是，当您不将responseType 设置为二进制类型时，您将获得默认的xhr.responseType = 'text' 和utf8 编码。然后 blob 创建失败。

我已将此解决方案包含在您的 stackblitz 中。