Question

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

每次我尝试这样做并使用图像源上的响应：

$('#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');

使用AJAX Request加载图像无法正常工作

2 个答案: