CodeRatchet CodeRatchet - 4 months ago 5x
Ajax Question

convert image response from external API to correct format to be displayed on page

I'm calling an external API which passes back an image data which I then take and render it on the page.

However when I call this API and console.log the response it looks like the following:

enter image description here

I'm not too familiar with images and their formats, so I've been googling trying to figure out how I convert this return type to the relevant format so I can display it on my page but with no avail.

My API call is as follows:

type: 'GET',
beforeSend: function (xhr) {
xhr.setRequestHeader('t', ts);
url: "'" + imageQuid + "')/$value",
data: rBody,
cache: true,
contentType: "image/png",
dataType: "text",
success: function (data) {

// Convert data to relevant format here
// Then display image as below

$('#photo').attr("src", "data:image/png;base64," + data + "");
error: function (request, error) {


If anyone can help shed some light in how or what I need to format the response in to so I can display it on the page it'll be appreciated.


Edit: I've tried and couldn't get it to work with jQuery ajax (either it doesn't support binary/arraybuffer response type or I couldn't find it), but the following code using XHR worked:

var xhr = new XMLHttpRequest();"GET", "'" + imageQuid + "')/$value", true);
xhr.responseType = 'arraybuffer';

xhr.onload = function(e) {
    if (this.status == 200) {
        var blob = new Blob([this.response], {type: "image/png"});
        var reader = new FileReader();
        reader.onloadend = function() {
            $('#photo').attr("src", reader.result);


Of course you will have to tweak a little it to get the same result as the original ajax request.