How do I display the image data from the /2/files/download endpoint?

[cloudlife]

So I'm authorizing it properly, providing the correct headers in the proper format, retriving the response headers, and the data. But I can't seem to figure out how to display the information that comes out, it just comes out as a huge chunk of this:

$.ajax(.........success: (data, textStatus, request) //data below

 �)��yJq��i�Lj�q`���K���8��ccx����R�I�̼��������)|�x:qC�2 �z�F�H;� 

Now clearly this is the data itself, but it doesn't work when I drop it into the src attritbute directly like this (using react): <img src={data} />

I've spent a few hours trying to figure out how to get this to work, trying multiple solutions without success, and I'm sure it's something simple. Any help would be greatly appreciated!

[Greg-DB · Accepted solution]

The /download call returns the raw binary data for the file. If it's an image and you won't to display it in an image tag, you'll need to either save it somewhere where you can serve it from a URL, or encode and format it as a base64 data URI, or perhaps using some of the newer blob/file functionality in modern browsers.

[cloudlife]

Thanks! That's really what I needed was what kind of data it was, and what kind of solutions there were.

I had already seen a possible solution using blobs, but the solution required that I send a response header for blob which potentially along with other things didn't end up working.

The simple solution is: go install whatwg-fetch and use that for your api calls and when you get the response run:
URL.createObjectURL( response.blob() )
and set that result as the image src attribute.

Thanks again!