Setting response image of Ajax Request to img tag

Question

I have a image in response from the server i am trying to add it as a image tag but i am having problems here is my code:

        $.ajax({
            type: "get",
            url: "SOME_IMAGE_URL",
            contentType: "image/png",
            success: function (data) {
           var img = new Image();
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(data);
            document.getElementById("createThingicon").appendChild(img);
            },
        });

When Responded image is appended to HTML its not showing rather its a broken image.Is there something wrong in my code? I hard coded the URL so that you can check the response

@jdu The problem is the appended image is not shown when its appended to html — StillCoder, Jul 23 '15 at 14:27
The url points to an image, but you're trying to use the data as base64 encoded(which it isn't). Also jQuery.ajax cannot handle binary ajax responses, have a look at this question http://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob — Musa, Jul 23 '15 at 14:29
@Musa I tried it it now gives me error of `Argument 1 is not valid for any of the 2-argument overloads of URL.createObjectURL.` — StillCoder, Jul 23 '15 at 14:37
@StillCoder update the question with your new code, so I can see what went wrong. — Musa, Jul 23 '15 at 14:39
I feel like I'm missing something obvious, but if this is a GET request to the image, couldn't you just create a `new Image()`, and then set its `src` to the URL? Then, use `onload` to do any other logic when it gets downloaded. — Katana314, Jul 23 '15 at 15:05
@Musa I just got it working from your ref answer from other post Thanks :) — StillCoder, Jul 23 '15 at 15:13

score 1 · Accepted Answer · edited Jul 23 '15 at 15:42

$.ajax({
     type: "get",
     url: "Your_Remote_URL",
     mimeType: "text/plain; charset=x-user-defined",
     success: function (data) {

         $image = $('<img />').attr('src', 'data:image/png;base64,' + base64encode(data));
         $('#createThingicon').append($image);

     },
 });

function base64encode(str) {
    var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    var out = "", i = 0, len = str.length, c1, c2, c3;
    while (i < len) {
        c1 = str.charCodeAt(i++) & 0xff;
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt((c1 & 0x3) << 4);
            out += "==";
            break;
        }
        c2 = str.charCodeAt(i++);
        if (i == len) {
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
            out += CHARS.charAt((c2 & 0xF) << 2);
            out += "=";
            break;
        }
        c3 = str.charCodeAt(i++);
        out += CHARS.charAt(c1 >> 2);
        out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
        out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
        out += CHARS.charAt(c3 & 0x3F);
    }
    return out;
}

Setting response image of Ajax Request to img tag

1 Answers1