9

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;
    }
)
Barett
  • 5,826
  • 6
  • 51
  • 55
Loshmeey
  • 341
  • 1
  • 5
  • 18

3 Answers3

11

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.

jdmcnair
  • 1,305
  • 15
  • 33
  • Thank you guys for the responses, i have made progress using the code Bellu posted, i am just struggling with the display of the image. Debugging the code i have the image in the response with a certain size but the image is still not displayed in the UI. Am i missing something? – Loshmeey Aug 04 '15 at 09:03
  • Figured it out. We had to encode the arrayBuffer into the base64 string. All good now :) Thank you guys for answers! – Loshmeey Aug 04 '15 at 09:45
  • 1
    Just coming back around to this from yesterday. Glad you got it working! For what it's worth, base64 probably isn't the only format that will work, it's just the most common example. You can read up further on formats for data URI schemes here: https://en.wikipedia.org/wiki/Data_URI_scheme#Format – jdmcnair Aug 04 '15 at 13:28
  • Will do! Thanks for the help! – Loshmeey Aug 04 '15 at 15:30
  • How can I display the same thing in option of select using angular js? – 3 rules Mar 01 '17 at 08:46
  • @jdmcnair Will this work if I have image of type _.png_? – Vinit Divekar Jun 16 '18 at 13:40
  • @jdmcnair data:text/xml;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAKlBMVEXv7+ – Techiemanu Nov 09 '20 at 06:43
  • Gettign above response and not showing image any clues? – Techiemanu Nov 09 '20 at 07:27
  • @Uttam it looks like you're not working with an actual image data type.That `text/xml;base64` says that the data is xml, correct? – jdmcnair Nov 09 '20 at 23:33
  • No its a png image returned as bytes of stream – Techiemanu Nov 10 '20 at 08:28
  • @Uttam I guess what I'm asking is where did that string above come from (the one that starts with `text/xml;base64`)? Clearly something is saying we're dealing with xml, not png. Is that part of your binding? – jdmcnair Nov 10 '20 at 18:41
8

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.

Community
  • 1
  • 1
HarrisonA
  • 81
  • 1
  • 3
  • 1
    +1 Because the original question is about a byte array and not yet a Base64 encoded string. Your snippet was the missing bit to plug it all together. – mks-d Jun 16 '16 at 15:31
2
  • 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; });
Bellu
  • 2,575
  • 2
  • 22
  • 29