Setting image SRC from binary retrieve from ajax request

Question

We are calling an external API, this API returns back a Byte array which we will then try to display an image.

Our API is as follows:

$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);
        }
    });
};

When this returns I log Data which displays as follows:

Now I'm having an issue trying to set the image data:image/png;base64 within my Success function of my ajax call. The error I see within the console is

GET data: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);
        }
    });
};

See: Convert blob to base64