How to return image from $http.get in AngularJS

getting image from api in angular 4
angular 7 display blob image
display image in angularjs
angular display image from url
display image in angular 6 from database
fetch image from url
display image from http response with image content-type
convert image url to blob angular 4

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("")

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

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



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}}"> 
<img ng-src="{{myImage}}.jpeg"> 
 <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.)


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.

AngularJS: API: $http, Simple GET request example: $http({ method: 'GET', url: '/someUrl' }) The function needs to return the config object directly, or a promise containing the config or� I have new to develop Angular 4. I have facing issue while getting response from API about display image.In API,an image file has input-stream file,I don't know how to retrieve it and display it pr

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

    method: 'GET',
    url: imageUrl,
    responseType: 'arraybuffer'
  }).then(function(response) {
    var str = _arrayBufferToBase64(;
    // 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

Safe image requests in angular, Since the browser just loads this image through a normal HTTP call, how is the Home � About � AngularJS � Angular � Redux � RxJS � Typescript � Nx � @ngrx � nx private loadImage(url: string): Observable<any> { return this.httpClient // load the image as a blob .get(url, {responseType: 'blob'}) // create an� I have an external API that return back image in response, the ContentType: image/jpeg.. I am using angular to make call to the services. How can I bind the image on the view through my view model

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([], {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.

Accessible Images Using Angular, Unfortunately, the tutorials in the site lack basic accessibility. In Step 6 of the Angular.js Tutorial (Templating Links & Images), the image '$http', function($scope, $routeParams, $http) { $http.get('phones/' + $routeParams. function($parse) { return { compile: function(tElm,tAttrs){ return function (scope� angularJS display base64 image. Ask Question Asked 5 years, 11 months ago. Viewed 76k times 28. 16. In my app i try to display base64 image for example i have:

By way of, 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( );
  reader.onload = function (e) {

You can reference it like so:

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

How to Fetch JSON Data with Image using HTTP GET in AngularJS , In this video you will going to learn how to make a request to the server using http object to Duration: 6:21 Posted: Mar 28, 2017 The Service. let token = { access_token: 'ABCDEF' }; // Get this from your auth service. This code will allow you to request an image with your access token, then return Observable<string> which will contain a Blob URL. This is using the FileAPI with the method createObjectURL.

Returning Image/Media Data with Spring MVC, The article shows the alternatives for returning image (or other media) and you' re interested in sharing that experience with the community (and getting http:// localhost:8080/spring-mvc-xml/image-manual-response.jpg� AngularJS will automatically strip the prefix before processing it as JSON. For example if your server needs to return: ['one','two'] which is vulnerable to attack, your server can return:)]}', ['one','two'] AngularJS will strip the prefix, before processing the JSON. Cross Site Request Forgery (XSRF) Protection

how to display image with blob image url? - angularjs - html, You can also try this $scope.preview = function(path) { $http.get(path) .then( function(response) { $scope.image = "data:image/jpg;base64," + btoa(String. Angular can only access static files like images and config files from assets folder. Nice way to download string path of remote stored image and load it to template.

Send an image from the Java backend to Angular using REST , getImage() : Observable<JsonString> { return this.http.get(this.serviceUrl) .map(( response : Response) => { return response.json(); })}. I have a simple Flask app running that returns a string and my Angular2 code has been cobbled together from various tutorials that I've seen online import { Component, OnI

  • 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.
  • What's the end goal here? If you know, 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 - 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
  • Could you check this question, I'm having similar problems :…
  • this answer actually worked for me
  • Thanks, it does look like a binary string. I'll check out the guides!
  • @ra170 Could you post the code for this if you managed to solve it?
  • @Tometoyou found the solution by googling around arraybuffer to base64:…
  • Could you check this question, I'm having similar problems :…
  • 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.
  • You saved my day..!! Thank you. @paradite can i know how to retreive list of images and display
  • 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.