使用AJAX请求加载图片无法正常工作

Question

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

http://edgecats.net

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);
});

Answer 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]));
        }
    });
});

Answer 2

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');