How to return image from $http.get in AngularJS

Question

In my controller I call a service that returns a promise

var onComplete = function(data) {
               $scope.myImage = data;           
            };

In my service I make a call to get the image by passing url directly to the image itself:

   return $http.get("http://someurl.com/someimagepath")
         .then(function(response){          
          return response.data;
         });

All the calls are succeeding and the response.data appears to be holding in an image inside:

����JFIF��;CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 90
��C




��C      

����"�� 
���}!1AQa"q2���#B��R��$

although I'm not sure if it actually does because I'm having trouble displaying it. I've tried (inside index.html)

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

Ideas? Is it possible to return an actual image from $http.get and convert its response back to image (jpeg, etc.)

Thanks!

Based on my experiments with trying to inject images into tags in order to reduce HTTP requests for a single-page angular app I was making, no, it isn't possible. — RevanProdigalKnight
– RevanProdigalKnight, Commented Apr 21, 2015 at 18:20
What's the end goal here? If you know http://someurl.com/someimagepath, why do you need to download it via an $http.get() and then inject it into an src tag when you can skip the middle man and simply put the path in the src tag? — Tom
– Tom, Commented Apr 21, 2015 at 18:22
@Tom - it was just a test to retrieve some data asynchronously and I thought of retrieving an image with it. No real end goal other than learning AngularJS — ra170
– ra170, Commented Apr 21, 2015 at 18:24
Could you check this question, I'm having similar problems : stackoverflow.com/questions/47161442/… — Hanzo
– Hanzo, Commented Nov 8, 2017 at 12:17
this answer actually worked for me stackoverflow.com/a/33125433/4631539 — parand87
– parand87, Commented Nov 14, 2017 at 6:33

Community · Accepted Answer · 2017-05-23 12:26:20Z

37

None of the methods seems to be complete, this is a complete solution:

  $http({
    method: 'GET',
    url: imageUrl,
    responseType: 'arraybuffer'
  }).then(function(response) {
    console.log(response);
    var str = _arrayBufferToBase64(response.data);
    console.log(str);
    // str is base64 encoded.
  }, function(response) {
    console.error('error in getting static img.');
  });


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

Then I am able to use it directly:

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

The function to convert arraybuffer into base64 is directly taken from ArrayBuffer to base64 encoded string

edited May 23, 2017 at 12:26

CommunityBot

11 silver badge

answered Sep 21, 2016 at 15:45

paradite

6,4464 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael M Over a year ago

The scenario of this post matches my situation closely. I like the potential of this solution, but unfortunately does not like the structure or format of the binary data (byte array) that is being passed back via Angular's $http service. The Uint8Array comes back empty when trying to create the array of bytes. I'll post my solution once I discern the difference.

Hema Over a year ago

You saved my day..!! Thank you. @paradite can i know how to retreive list of images and display

Pramesh Bajracharya Over a year ago

Worked!! Somebody give this guy a medal!!. Also to the future readers the responseType: 'arraybuffer' in $http is important please do not miss it. I was trying to get it done without it but couldn't. Without this the _arrayBufferToBase64 seems to return empty string.

korya · Accepted Answer · 2016-02-19 20:50:53Z

18

Just in case anyone needs it.

In my case, I had to send the request through angular's $http service, because of various transformers and other fancy stuff we do with it.

So based on the Mozilla's guide mentioned earlier, I came up with the following solution:

let getImageDataURL = (url, imageType = 'image/jpeg') => {
  return $http.get(url, {responseType: 'arraybuffer'}).then((res) => {
    let blob = new Blob([res.data], {type: imageType});
    return (window.URL || window.webkitURL).createObjectURL(blob);
  });
};

The basic idea is to set the responseType property of the underlying XHR request and the convert the binary content to data URL.

answered Feb 19, 2016 at 20:50

korya

2,0161 gold badge15 silver badges12 bronze badges

Comments

Dan Prince · Accepted Answer · 2015-04-21 18:35:38Z

7

The image that's coming back is in binary encoding, rather than Base64.

Understandably, <img> tags don't support sourcing from binary through attributes, so you'll have to look at another solution.

You could try converting the binary encoding to Base64 at the client side using TypedArrays together with the btoa function. Then you'd be able to use

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

This guide a by Mozilla covers making an XHR request for and image and reading it directly into a UInt8Array. It should be a good starting place.

It's written for plain old Javascript, but translating it to Angular should be a good exercise if you are just learning the ropes.

edited Apr 21, 2015 at 18:35

answered Apr 21, 2015 at 18:26

Dan Prince

30.1k15 gold badges93 silver badges124 bronze badges

4 Comments

ra170 Over a year ago

Thanks, it does look like a binary string. I'll check out the guides!

Tometoyou Over a year ago

@ra170 Could you post the code for this if you managed to solve it?

paradite Over a year ago

@Tometoyou found the solution by googling around arraybuffer to base64: stackoverflow.com/questions/6965107/…

Hanzo Over a year ago

Could you check this question, I'm having similar problems : stackoverflow.com/questions/47161442/…

Steve · Accepted Answer · 2019-12-24 15:53:07Z

1

By way of https://stackoverflow.com/a/43032560/418819, you can use "blob" as the responseType and very neatly get the data url with a FileReader.

$http.get( url, { responseType: "blob" } ).then((result) => {
  var reader = new FileReader();
  reader.readAsDataURL( result.data );
  reader.onload = function (e) {
    return e.target.result;
  };
});

You can reference it like so:

<img data-ng-src="{{img}}">

answered Dec 24, 2019 at 15:53

Steve

1,1621 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to return image from $http.get in AngularJS

4 Answers 4

3 Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related