angularJS display base64 image

by

If the image is from remote server, you can fetch the base64 content in your controller like this:

$http.get($scope.user.photo).then(function(response) {
    $scope.user.data = response.data;
});

then display it on view

<img data-ng-src="data:image/png;base64,{{user.data}}" data-err-src="images/png/avatar.png"/>

While if the image is on local disk/phone, first you can get the image data from FileReader

var fileInput = document.getElementById("myfileinput");

// files is a FileList object (similar to NodeList)
var files = fileInput.files;
$scope.imageSrc = files[0].getAsDataURL();

then bind the $scope.imageSrc to view as <img ng-src="https://stackoverflow.com/questions/28235246/imageSrc" >

More Related Contents:

  1. What is Hungarian Notation? [duplicate]
  2. How do I bind to list of checkbox values with AngularJS?
  3. How to handle anchor hash linking in AngularJS
  4. AngularJS Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https
  5. Recursion in Angular directives
  6. how to split the ng-repeat data with three columns using bootstrap
  7. firebase.database is not a function
  8. What is the correct syntax of ng-include?
  9. What is the difference between compile and link function in angularjs
  10. AngularJS – ng-disabled not working for Anchor tag
  11. AngularJS – how to get an ngRepeat filtered result reference
  12. What is the $$ (double dollar sign) used for in angular?
  13. How to access object property with invalid characters
  14. How do you serve a file for download with AngularJS or Javascript?
  15. Angular 2: Callback when ngFor has finished
  16. adding and removing classes in angularJs using ng-click
  17. show validation error messages on submit in angularjs
  18. How do I set default value of select box in angularjs
  19. ‘load’ event not firing when iframe is loaded in Chrome
  20. Access index of the parent ng-repeat from child ng-repeat
  21. Not a Legal JSONP API — How to get data without CALLBACK parameter
  22. $watch’ing for data changes in an Angular directive
  23. Injecting Dependencies in config() modules – AngularJS
  24. $http.get(…).success is not a function
  25. Open links in new window using AngularJS
  26. What are “decorators” and how are they used?
  27. WARNING: Tried to load angular more than once. Angular JS
  28. Clear localStorage on tab/browser close but not on refresh
  29. Angular controller scope not updating after jQuery ajax call
  30. angularjs: change filter options dynamically

Leave a Comment