AngularJS - Show byte array content as image

Question

AngularJS - Show byte array content as image

I'm searching into my database a image as a byte array. I want to show this content as file using the markup image, but it doesn't work here.

// Controller which get my image and put into $scope.
function MyController($scope, $http, $location) {  

    var url = '/json/FindImage?id=1';  
    $http.get(url).success(function(result) {  
        $scope.image = result.Image;  
    }  
}  

// HTML
<!-- It doesn't work -->  
<img src="{{image}}" />  
<!-- It doesn't work also -->  
<img ng-src="{{image}}" />

Any idea? Thank you all!

javascript
angularjs

Answer 1

Use ng-src in the following format

<img ng-src="data:image/JPEG;base64,{{image}}">

Answer 2

If you can get your server to return the image in a base64 encoded string, you could use a data url as the src attribute.

Answer 3

The src attribute of img points to the source file of the image, it doesn't contain the actual source data. You can't do what you want this way; instead, you would have to write an image decoder in JavaScript (e.g., https://github.com/devongovett/png.js), which outputs into a canvas element.