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...

AngularJS：二进制图像未加载

1 个答案: