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

Question

我需要使用AJAX请求从此源加载gif图像：

http://edgecats.net

每次我尝试这样做时，在图像源上使用以下响应：

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

它行不通！

使用firefox的devtools复制响应并使用以下命令时：

data:image/gif;base64,<PASTE_HERE>

一切都像一个魅力！

如何弄清楚如何将我的回复正确地转换为图片？

这是我的AJAX请求代码：

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

您无需在此特定任务上使用Ajax。 但是，如果您坚持要使用，则必须使用技巧来完成这项工作：

$(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

我对边缘的猫不熟悉，但是当我查看该站点时，响应不是以base64编码的，因此无法正常工作。

如何将图像src设置为edgecats.net

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