Javascript 在phonegap应用程序中加载基本身份验证安全图像

我有一个phonegap应用程序，它与使用HTTP Basic Auth保护的web api进行通信。api返回带有img标记的html，这些标记引用同样位于安全服务器上的图像。不知何故，我需要我的应用程序能够请求和加载这些图像。将基本身份验证凭据注入src（即src=http://username:password@MySecuredServer.com/…）将无法工作。此外，我不控制服务器，因此无法在base64中发送图像

我目前的方法是使用$.ajax请求图像，设置授权头，然后从缓存将图像加载到DOM（因为图像是通过ajax调用缓存的）。理想情况下，我应该能够使用$.ajax请求每个图像一次，然后将图像从缓存加载到页面上。如果页面被重新加载（因为图像已经被缓存），但在第一次请求时不会加载图像（即使我正在等待请求完成），这种方法也会起作用。请注意，我的phonegap应用程序只有一个页面（从HTMLDOM的角度来看），在该页面上动态加载和卸载内容，因此永远不会重新加载主页。以下是我目前正在尝试的：

$.ajax({
       url: 'http://MySecuredServer.com/images/example.png',
       beforeSend: function(req){
           req.setHeader('Authorization', 'Basic ' + base64UserCredentials);
       },
       cache: true,
       complete: function(){
            var img = document.createElement('img');
            img.src = 'http://MySecuredServer.com/images/example.png';
            $('#target').append(img);
       }
       });

我也尝试过类似的事情

complete: function(){
    var img = new Image();
    img.src = http://.....
    $(img).on('load', function(){
          $('#target').append(img);
    });
}

---

所以这里有一个问题：我怎样才能将安全的图像放入我的应用程序中？这是正确的方法吗？如果是，我做错了什么？如果没有，那么我如何请求这些安全图像？对一般概念或特定场景的任何帮助都将非常有用。提前谢谢

最后，我使用NiKo提供的解决方案将二进制数据转换为base64，并在头中设置身份验证凭据

//request image
var xhr = new XMLHttpRequest();
xhr.open('GET', url, false);
xhr.responseType = 'arraybuffer';
xhr.setRequestHeader('Authorization', 'Basic ' + encodedCredentials);
xhr.onload = function(e) {
    $("#target").attr('src', 'data:' + type + ';base64,' + base64ArrayBuffer(e.currentTarget.response));
};
xhr.send();

其中base64ArrayBuffer是NiKo给出的函数