AngularJS: Binary Image not loading

angularjs, javascript

Solution

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

Problem

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.

Original source