Search code examples
javascriptimagexmlhttprequest

Loading image with XHR without responseType set to blob

I have this situation in which I load an image with XMLHttpRequest but without setting responseType to blob. So I receive a string

enter image description here

My question is, is it still possible to render the image in this situation?

I tried, for example, to convert this string to a Blob

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

but this doesn't render the expected image. Any suggestions?

DEMO

And here is how my node backend sends that image to the browser

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

  • Finally got it: If you do not want to have xhr.responseType = 'blob' and you want to create a url from received data, then you need to set xhr.responseType = 'arraybuffer'. This allows to convert the binary xhr.response into a blob and then create a URL.createObjectURL.

    The point is that when you do not set responseType to a binary type then you get the default xhr.responseType = 'text' and utf8 encoding. And then blob creation fails.

    I have included this solution in your stackblitz.