Returning image data over AJAX

Question

Ok guys this one seems simple but has been driving me crazy. It's 2 am here so I'm just gonna lay this out there.

I'm making a proof of concept page that loads json data and puts it in a table. That's done.
For each object in the main json array, there are an array of images, with IDs.
These IDs can be used in conjuction with the dataID to form a long url for another AJAX request, this time for an image.

Here's the tricky part. After finally handling CORS issues I finally am getting back packets with responses. And basically I'm getting screwed in the weirdest way. Here's a tiny piece of one of my responses:

ÿØÿàJFIFÿÛ  ( 
%!1!%)+...!683-7(-.+...

That's garbage to me. But it's got something to do with how the picture is coming down. I've been messing with content-type but even text/plain looks like that. I'm getting that from the view and Chrome's network tab of the developer tools. When I go from response to "Preview" the text reads:

"/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUSEhMVFhUWGBkaGBcXGBYYGBseGBsaFxoXGRo HiggGB..."

Basically what's in the preview tab is perfect. I put that in an image tag after src='data:image/png;base64,' + that stuff and it worked perfectly. What I'm after really is how the heck is Chrome getting that text from the response? And how do I get that from the success:function()data{} from a $.ajax call. I will put what i'm doing below code wise but its pretty standard. The packet returns and everything I just want the PREVIEW version, not the RESPONSE version. And I can't find any documentation.

var response = $.ajax({
            type: 'GET',
            url: 'http://dev.dragonflyathletics.com:1337/api/dfkey/events/' + item.id + '/media/' + imageID,
            contentType: 'multipart/form-data',
            headers: {
                'Authorization': 'Basic ' + btoa('**:**')
            },
            success: function (data) {
                a = data;
                imgTag = '<img alt="' + item.images[0].caption + '" src="data:image/png;base64,' + data + '">';
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                //alert(jqXHR);
                //alert(textStatus);
                //alert(errorThrown);
                //requestRetry('events', 3);
            }
        });

Please help me out I will mark answer in the morning <3

EDIT: I am getting the image from an API I have no control over. Here are some snips of what it looks like on the network tab.

Response:

And this is what the preview looks like. If I could gain access to this string in my success: function(data){} in ajax I'm set.

Preview:

Maybe specify what kind of `dataType` you expect in return? https://stackoverflow.com/questions/2722750/ajax-datatype — Jeremy Thille, Feb 23 '18 at 08:24
If the image works when you enter it as `base64`, then that is what the text is. — Agney, Feb 23 '18 at 08:34
If the data you receive is a blob see this to convert it to base64 : https://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript/28243128 — Dyo, Feb 23 '18 at 08:34
messing with content-type and data-type do nothing. The response is always the same. And the preview is always a working base64 string that I can't seem to get by using any of the links yall sent. I've used btoa() atob() and even that custom base64Encode(str) one and nothing works — Matthew Young, Feb 23 '18 at 08:47
That's binary data - the image in its default format. How is the image stored on the server? — Reinstate Monica Cellio, Feb 23 '18 at 08:48
idk I was given an assignment that's meant to be challenging for lack of data. so like I'm just calling an api. when I make the request on hurl.it the response is an actual picture so I guess it's just a request for a .jpg — Matthew Young, Feb 23 '18 at 08:51
Yes - I believe that's the problem. You can't download and then display images in that way. You'd need to modify the server-side application to return a base64 encoded image if you wanted to do this. Open the URL of the AJAX call in a browser window and see if it's an image. If it is then forget AJAX and just use an `image` element with the `src` attribute set to the URL. — Reinstate Monica Cellio, Feb 23 '18 at 08:54
dude putting it in the src is such a good idea. only one problem: it requires the basic authentication header and stuff. I'm looking into how to put that into a src link now. I tried embedding it like http://username:password@server but chrome blocks it. — Matthew Young, Feb 23 '18 at 09:19
Yeah, due to obvious security issues putting a username and password into an image Url really shouldn't work (but does in some browsers, some of the time). If you can write a bit of server-side code to download the image and serve it to you then that would solve your problem. I know you don't have access to this specific server application, but you could put this proxy app on another server. — Reinstate Monica Cellio, Feb 23 '18 at 09:27
Maybe this can help https://stackoverflow.com/a/17682424/1171425 — tomacco, Feb 23 '18 at 09:37
Possible duplicate of [Using jQuery's ajax method to retrieve images as a blob](https://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob) — Reinstate Monica Cellio, Feb 23 '18 at 09:43
OMG YES!!! @tomacco you did it. Can you post an answer or redirect to that stack overflow question. I'll post again for clarification for any mods. Thank you so much dude peace be with you always. — Matthew Young, Feb 23 '18 at 15:32

Returning image data over AJAX

0 Answers0