AngularJS: Binary Image not loading

Question

I am trying to use ng-src to load binary image data, however all I am getting in the console is: GET http://localhost:3000/%7B%7D 404 (Not Found) in the console with a broken image in the front end.

I am using the following code to load the image: <img ng-src="{{ event.snapshot }}" />

event.snapshot is lazy loaded with the following code:

$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]);
        };
    }
}

When the user pops open an event tab, I am loading the image in. The console.log is showing the data as loaded, and it comes in the following style:

/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCADGAoADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAA...

I've cut the data short as it is much longer than this, do I need to perform additional massaging to the data? I am confused as to why it is not loading correctly.

possible duplicate of AngularJS - Show byte array content as image — zs2020
– zs2020, Commented Dec 5, 2013 at 16:59

Mathew Berg · Accepted Answer · 2013-12-05 16:49:11Z

5

You need to prepend 'data:image/png;base64,' (might change depending on type) to the data for src to work for images

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

answered Dec 5, 2013 at 16:49

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: Binary Image not loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related