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

Question

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

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

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

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

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

演示

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

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中。