AngularJS：二进制图像无法加载

Question

我正在尝试使用ng-src来加载二进制图像数据，但是在控制台中我只得到： GET http://localhost:3000/%7B%7D 404 (Not Found)，在前端显示的是一张损坏的图片。

我正在使用以下代码来加载图片：<img ng-src="{{ event.snapshot }}" />

event.snapshot是通过以下代码进行惰性加载的：

$scope.downloadImage = function(imgReady, index) {
    if (imgReady == false) {


        for (var i = $scope.vehicles[index].events.length - 1; i >= 0; i--) {
            var config = {
                method: 'POST',
                url: '/Events/SnapShot',
                data: $scope.vehicles[index].events[i],
                cache: false
            }

            RequestService.makeApiRequest(config).success(function(j) {
                return function(response) {
                    console.log(response.data);
                    $scope.vehicles[index].events[j].snapshot = response.data;
                }
            }(i));

            console.log($scope.vehicles[index].events[i]);
        };
    }
}

当用户打开事件选项卡时，我正在加载图片。 console.log 显示数据已加载，并以以下方式呈现：

/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy...

由于数据比这个要长得多，所以我将数据缩短了一些。我需要对数据进行额外的调整吗？ 我不明白为什么它没有正确加载。

- Neil

---

可能是重复的问题：AngularJS - 将字节数组内容显示为图像 - zs2020

Answer 1

您需要在图像的数据前面添加"data:image/png;base64,"（可能会根据类型而改变），以使src对于图像起作用。

data:image/png;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCADGAoADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAA...

- Mathew Berg