Question

我需要从需要基本身份验证的服务器中提取图像。为此，我无法将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>

问题的核心：我将第一个代码块放入getPictureURL()，将document.getElementById("test").src=替换为return，并且由于ng-repeat和xhr.open打开了一个连接，它会发送大量请求图片网址array中每个项目的每次迭代。我知道ng-src即使在ng-repeat中也不会重新加载图片，直到图片路径发生变化。所以最终，我想在getPictureURL()中获取并返回base64编码的URL，以便它可以显示图片。

我该怎么办？

如何使用XHR将编码的URL返回到ng-repeat内的ng-src

0 个答案: