CODEWITHSUNDEEP
angularjs
SRK
SRK

Reputation: 163

how to return image in angularjs

Currently, I am getting the user details in the response from the server. From that response, I want to encode the image and wants it to display on my front end. currently, this what I am doing:

HTML: <img ng-src=data:image/png;base64,{{user_image}}>

Angularjs: 

  $http({
  method: 'GET',
  url: 'userimage',
  }).then(function(response) {
     $scope.user_image = response.data;
     var str = _arrayBufferToBase64(response.data.user_image);
  }, function(response) {
    console.error('error.');
});


function _arrayBufferToBase64(buffer) {
var binary = '';
var bytes = new Uint8Array(buffer);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
  binary += String.fromCharCode(bytes[i]);
}
return window.btoa(binary);

}

In response, I am getting user details but I don't know how to encode the image. Please let me know where I am going wrong.

Upvotes: 1

Views: 224

Answers (1)

Viacheslav Moskalenko
Viacheslav Moskalenko

Reputation: 1067

Shouldn't you assign a base64 encoded string to a scope variable rather than response.data? I guess, what you really want is:

$scope.user_image = _arrayBufferToBase64(response.data.user_image);

There is one issue though. Your haven't specified a response type as 'arraybuffer'. Please, add that to your request config object:

responseType: 'arraybuffer'

Upvotes: 3

Related Questions