angularJS display base64 image

Solution 1:

If the image is from remote server, you can fetch the base64 content in your controller like this:

$http.get($scope.user.photo).then(function(response) {
    $scope.user.data = response.data;
});

then display it on view

<img data-ng-src="data:image/png;base64,{{user.data}}" data-err-src="images/png/avatar.png"/>

While if the image is on local disk/phone, first you can get the image data from FileReader

var fileInput = document.getElementById("myfileinput");

// files is a FileList object (similar to NodeList)
var files = fileInput.files;
$scope.imageSrc = files[0].getAsDataURL();

then bind the $scope.imageSrc to view as <img ng-src="imageSrc" >

Solution 2:

Call image data with a function like this:

<img data-ng-src="{{getImage(doc.image)}}" />

in controller:

$scope.getImage = function(data){
    return 'data:image/jpeg;base64,' + data;
}

Solution 3:

We can simply do something like this:

<img src="data:image/png;base64,{{myObject.userImage}}">

For jpeg:

<img src="data:image/jpg;base64,{{myObject.userImage}}">

This is for AngularJS 1.x.x