javascript - 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/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCADGAoADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAA...

我已将数据剪短，因为它比这长得多，我是否需要对数据执行额外的处理？我很困惑为什么它没有正确加载。

Answer 1

您需要在数据前添加“data:image/png;base64”(可能会根据类型更改)，以便 src 用于图像

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