Javascript 如何使用XHR在ng repeat中向ng src返回编码URL

我需要从需要基本身份验证的服务器中提取图像。要做到这一点，我不能将URL放在ng src中，因为我无法发送经过身份验证的请求，所以我使用XHR手动提取图像数据

    var xhr = new XMLHttpRequest();

xhr.open("GET", 'https://url.com/{id}/picture', true);
xhr.setRequestHeader("Authorization", "Basic " + btoa(userID + ":" + password));
xhr.responseType = 'arraybuffer';
xhr.onload = function(evt) {
    if(this.status == 200) {
        var uInt8Array = new Uint8Array(this.response);
        var i = uInt8Array.length;
        var binaryString = new Array(i);
        while(i--) {
            binaryString[i] = String.fromCharCode(uInt8Array[i]);
        }
        var data = binaryString.join('');
        var base64 = window.btoa(data);
        document.getElementById("test").src="data:"+xhr.getResponseHeader('Content-Type')+";base64,"+base64;
    }
};
xhr.send();

将上面代码中的URL替换为图片的实际路径可以工作，并在名为

test

的div中显示图片

现在我需要显示这些图像的列表

<tr ng-repeat="x in array">
        <td">
            <div>
                <img data-ng-src={{getPictureURL()}} onerror="this.onError=null;this.src='default.png'" >
            </div>
        </td>
</tr>

一个模糊的提示，使用
$q.all
API调用多个XHR请求并使用
。当
最后设置所有路径时。您需要先将这些路径加载到数据模型中，不要在视图中使用函数。还考虑缓存请求者请查看