Loading image using AJAX Request won't work

Question

I need to use an AJAX request to load a gif image from this source:

Everytime I try to do so and use the response on the image source as:

$('#cat-thumb-1').attr('src', 'data:image/gif;base64,' + data);

It won't work!

When copying the response using firefox's devtools and using:

data:image/gif;base64,<PASTE_HERE>

Everything works like a charm!

How can I figure out how to turn my response into an image correctly?

This is my AJAX request code:

function getCatImg() {
    return $.ajax({
        type: 'GET',
        url: 'http://edgecats.net',
        datatype:"image/gif"
    });
}

getCatImg().success(function(data) {
   $('#cat-thumb-1').attr('src', 'data:image/gif;base64,' + data);
});

It won't work! isn't a proper problem description and is fairly meaningless. There is no datatype: "image/gif" for ajax and what are you doing with return? Show the full usage of this code — charlietfl
– charlietfl, Commented Sep 7, 2015 at 20:57
did u check whether the success callback is getting executed or not..?? like some console log or something...!!! — Akshay Soam
– Akshay Soam, Commented Sep 7, 2015 at 21:11
Yes I did. The problem is that the image string is corrupted or truncated, I need to figure out how to properly encode the image string — lucasfcosta
– lucasfcosta, Commented Sep 7, 2015 at 21:12
but you said if you directly place the returned image string as image src that is working...?? — Akshay Soam
– Akshay Soam, Commented Sep 7, 2015 at 21:15

Alex · Accepted Answer · 2015-09-07 21:38:17Z

1

You don't need to use Ajax on this particular task. But, if you insist, you must use a trick to make this work:

$(document).ready(function() {
    $.ajax('http://edgecats.net', {
        success: function(r) {
            var reader = new FileReader();

            reader.onload = function(e) {
                $('img').prop('src', e.target.result);
            };

            reader.readAsDataURL(new Blob([r]));
        }
    });
});

edited Sep 7, 2015 at 21:38

answered Sep 7, 2015 at 21:13

Alex

8109 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lucasfcosta Over a year ago

I know I don't, but I need to solve this problem using AJAX. Also, I've already tried btoa(data) and it still won't work.

Alex Over a year ago

Edited my solution. The btoa function will work only on strings. This will work only in modern browsers and again, the Ajax is superfluous. You can use directly the FileReader. Check developer.mozilla.org/en/docs/Web/API/FileReader and.. i've found this duplicate: stackoverflow.com/questions/10982712/…

Musa Over a year ago

The only problem is r is going to be text when you need it to be binary

Raxa · Accepted Answer · 2015-09-07 21:00:26Z

0

I am not familiar with the cats on the edge, but as I've looked at the site, the response was not base64 encoded, so it won't work that way.

How about setting the image src to edgecats.net

$('#cat-thumb-1').attr('src', 'http://edgecats.net');

answered Sep 7, 2015 at 21:00

Raxa

3823 silver badges7 bronze badges

1 Comment

lucasfcosta Over a year ago

I do need to use Ajax. :(

Collectives™ on Stack Overflow

Loading image using AJAX Request won't work

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related