受保护网址上的图片

I am trying to retrieve an image from a protected url (at this point the user is locked in). The image should be set as source for an image-tag in my application (Which by the way is a Phonegap-App, so the SameOriginPolicy is no issue here).

Here is what I have so far:

$.ajax({
    url: 'http://' + ip + ":" + port + '/art',
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
    },
    timeout: 3000,
    cache: true,
    processData: false,
    success: function (requestData, status, jqXHR) {
        $("#cover").attr("src", requestData);
    },
    error: function (jqXHR, status, error) {
        console.log(error);
    }
});

Unfortunately this won't work. Any idea or different approach is welcome.

EDIT: Forgot to mention, that I have no influence on the server, so I can't send the image base64 encoded.