1

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);
});
lucasfcosta
  • 285
  • 2
  • 10
  • 1
    `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 Sep 07 '15 at 20:57
  • did u check whether the success callback is getting executed or not..?? like some console log or something...!!! – Akshay Soam Sep 07 '15 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 Sep 07 '15 at 21:12
  • but you said if you directly place the returned image string as image src that is working...?? – Akshay Soam Sep 07 '15 at 21:15
  • Yes. If I go on the devTools and use Right Click > Copy Response and then paste it everything works – lucasfcosta Sep 07 '15 at 21:20
  • Is response being sent as text? Is it base64 encoded at server? – charlietfl Sep 07 '15 at 21:27
  • 1
    similar http://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob – Musa Sep 07 '15 at 21:57

2 Answers2

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]));
        }
    });
});
Alex
  • 810
  • 9
  • 16
  • 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. – lucasfcosta Sep 07 '15 at 21:17
  • 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 https://developer.mozilla.org/en/docs/Web/API/FileReader and.. i've found this duplicate: http://stackoverflow.com/questions/10982712/convert-binary-data-to-base64-with-javascript – Alex Sep 07 '15 at 21:38
  • 1
    The only problem is `r` is going to be text when you need it to be binary – Musa Sep 07 '15 at 21:58
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');
Raxa
  • 372
  • 3
  • 7