gaurav gupta gaurav gupta - 1 year ago 494
AngularJS Question

display images fetched from s3

I want to fetch images from s3 and display them on my HTML page.

Angular HTML file:

<section data-ng-controller="myCtrl">
<img ng-src="{{src}}" width="200px" height="200px">

Angular Controller file:

angular.module('users').controller('myCtrl', ['$scope',function($scope) {
var s3 = new AWS.S3();
s3.getObject({Bucket: 'mybucket', Key: 'myimage.jpg'},function(err,file){

//code?? to display this image file in the img tag
//$scope.src=file????....obviously it wont work


I found something call FileReader and tried this one:

var reader = new FileReader();
reader.onload = function(event) {
$scope.src =;

But it shows error:

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

Please help me with the code to display image file in the img tag

My S3 bucket is not public


I am not interested in s3. what i want to know is that

how to display an image which you have in your javascript code in the form of a file object(s3 obj) using the HTML image tag

Answer Source

You don't "fetch" the images to display. You just point the image URL to the location where they are stored (S3 in your case). So instead of pulling individual object, pull the list of files in that bucket (bucket.listObjects) and then add them to the source of the thumbnails/images.

<section data-ng-controller="myCtrl">
    <img ng-src="{{s3Url}}{{image.Key}}" width="200px" height="200px" ng-repeat="image in allImageData">
$scope.s3Url = 'https://s3-<region>';
var bucket = new AWS.S3({params: {Bucket: 'myBucket'}});
  bucket.listObjects(function (err, data) {
    if (err) {
    } else {
      $scope.allImageData = data.Contents;

Assuming here that the files have read permission. They won't be accessible without public read permission for obvious reasons.

EDIT: Based on the comment, the question is seeking to load the actual image on the page. Here's how to do it:

function myCtrl($scope, $timeout) {    
  accessKeyId: 'YOUR_ACCESS_TOKEN', secretAccessKey: 'YOUR_SECRET'});
    AWS.config.region = "YOUR_REGION";

var bucket = new AWS.S3({params: {Bucket: 'YOUR_BUCKET'}});

    bucket.getObject({Key: 'happy-face.jpg'},function(err,file){

        $scope.s3url = "data:image/jpeg;base64," + encode(file.Body);

function encode(data)
    var str = data.reduce(function(a,b){ return a+String.fromCharCode(b) },'');
    return btoa(str).replace(/.{76}(?=.)/g,'$&\n');

The data you get from the S3 is byte array. You need to convert it into the base64encoded data URI. The encode function is borrowed from here. Here's one working jsFiddle with credentials removed.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download