How to display Image received as byte array in Angular JS

All we need is an easy explanation of the problem, so here it is.

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

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

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

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

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply