Question

我们正在调用外部API，此API返回一个Byte数组，然后我们将尝试显示图像。

我们的API如下：

$scope.GetImage = function () {

    $.ajax({
        type: 'GET',
        url: "https://MyURL/Service.svc/Media(guid'da1b080f-2558-4d06-b9ce-2fe5955c3a20')/$value",
        data: rBody,
        contentType: "image/png",
        success: function (data) {
            $("#photo").prepend('<img id="theImg" src="data:image/png;base64,' + data + '" />')

            console.log(data);
        },
        error: function (request, error) {
            console.log('error:' + error);
        }
    });
};

当返回I log Data时，显示如下：

现在我在尝试设置图像数据时出现问题：image / png; base64在我的ajax调用的Success函数中。我在控制台中看到的错误是

GET数据：image / png; base64，％EF％BF％BDPNG％1A％EF％BF％BD％EF％BF％BD％EF％BF％BDIHDR％EF％BF％...％EF％BF％BD ％0B＆％;％EF％BF％BD％EF％BF％BD％0B＆％;％01％EF％BF％BD％1C％C8％B0％EF％BF％BD％EF％BF％BD net :: ERR_INVALID_URL

Answer 1

$scope.GetImage = function () {

    $.ajax({
        type: 'GET',
        url: "https://MyURL/Service.svc/Media(guid'da1b080f-2558-4d06-b9ce-2fe5955c3a20')/$value",
        data: rBody,
        contentType: "image/png",
        success: function (data) {
            var reader = new window.FileReader();
            reader.readAsDataURL(data); 
            reader.onloadend = function() {
                base64data = reader.result;  
                $("#photo").prepend('<img id="theImg" src="'+base64data+'" />');              
                console.log(base64data);
            }

            console.log(data);
        },
        error: function (request, error) {
            console.log('error:' + error);
        }
    });
};

请参阅：Convert blob to base64

从ajax请求中的二进制检索设置图像SRC

1 个答案: