How to return image from $http.get in AngularJS

by

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

More Related Contents:

  1. ng-model for “ (with directive DEMO)
  2. angularjs 1.6.0 (latest now) routes not working
  3. How to iterate over the keys and values with ng-repeat in AngularJS?
  4. AngularJS execution order with `$q` — Chaining Promises
  5. Show spinner GIF during an $http request in AngularJS?
  6. Can you override specific templates in AngularUI Bootstrap?
  7. AngularJS-Twig conflict with double curly braces
  8. How to count total number of watches on a page?
  9. Preventing / dealing with double button clicks in angular
  10. Angular pass callback function to child component as @Input similar to AngularJS way
  11. Chaining Ajax calls in AngularJs
  12. Why angularjs will invoke function `name()` twice?
  13. AngularJS Group By Directive without External Dependencies
  14. Angular orderBy number sorting as text in ng-repeat
  15. AngularJS – Multiple ng-view in single template
  16. AngularJS : How to use one resolve for all the routes of my application
  17. Difference between ui-sref and $state.go in AngularJS UI-Router
  18. Angularjs how to cancel resource promise when switching routes
  19. How can you limit the value from input using AngularJS?
  20. Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443
  21. How to make orderby filter work on array of strings?
  22. Enable/Disable Anchor Tags using AngularJS
  23. How do i use $on in a service in angular?
  24. Illegal use of ngTransclude directive in the template
  25. AngularJS $q. Deferred queue
  26. How to master AngularJS? [closed]
  27. Understanding the transclude option of directive definition?
  28. How to integrate AngularUI to AngularJS?
  29. how to pass querystring in angular routes?
  30. Two views in one AngularUI Router state sharing scope

Leave a Comment