javascript – 在phonegap应用中加载基本身份验证的安全图像

我有一个phonegap应用程序,它与使用HTTP Basic Auth保护的web api进行通信. api使用img标签返回html,img标签引用同样位于安全服务器上的图像.不知何故,我需要我的应用程序能够请求和加载这些图像.将基本身份验证凭据注入src(即src = http：// username：[e-mail] / …)将不起作用.另外我不控制服务器,所以我无法在base64中发送图像.

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

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

所以问题是：如何将安全图像放入我的应用程序？这是正确的方法,如果是这样,我做错了什么？如果没有,那我该如何申请这些安全图像呢？对一般概念或特定场景的任何帮助都会非常棒.提前致谢！

解决方法

我最终使用提供 here的NiKo解决方案将二进制数据转换为base64,只是在标题中设置了Auth凭证.

//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给出的函数.