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