How to display Image received as byte array in Angular JS

Question

I have a server side application that will return an image. These are the response headers:

Content-Disposition: attachment; filename=8822a009-944e-43f4-999b-d297198d302a;1.0_low-res
Content-Length: 502343
Content-Type: image/png
Date: Mon, 03 Aug 2015 19:13:39 GMT
Server: Apache-Coyote/1.1

In angular, I need to display the image. When getting the image, I use the angularJS $http to call the server and put the result in scope, but I never reach the success function of $http. Executing this call from postman returns the image normally. I'm curious to how to get Angular to display the image.

This is how I display the image:

<img ng-src={{image}} />

Here is the call to get the image from the server:

$http.get(url, {responseType: "arraybuffer"})
    .success(function(data) {
        $scope.image= data;
    }
)

Answer 1

I agree with Bellu's response in that you should be using the .then function, rather than the .success function on the promise returned from the $http.get. However, I'd imagine you'll still have an issue with your ng-src reference in that you are not supplying it with a URL, but instead a reference to your byte array.

To bind your ng-src reference to a byte array held in memory on the client, your binding should take the following form:

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

Edit

Since I never mentioned it explicitly, the ng-src binding above assumes that your image data is in base64 format. HarrisonA provided a method below to convert the array if it isn't already in base64 format.

Answer 2

Just wanted to add to jdmcnair answer and Loshmeey's comment:

Below is a link to the function that I used to convert the array buffer into a base 64 string.

ArrayBuffer to base64 encoded string

The function:

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

I used this function in my angular controller and then passed the result (using a $scope variable) to the img element in my html file.

Answer 3

• I think that you should use then callback, in the angular documentation they say that the success callback has been deprecated.
• Your img is in the data response property.

After these considerations, you could try something like this.

$http.get(url, {responseType: "arraybuffer"} ).then(function(response) { 
$scope.image= response.data; });