JSFiddle - React, Tailwind, and code Playground

by anil001ry

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/aws-sdk/2.2.9/aws-sdk.min.js"></script>
 <div ng-app="app" ng-controller="mainController">
  Load Multiple Images From S3 From API using Keys
  <hr>
  <div ng-repeat="x in courseDetails">
    {{$index+1}}
    <p>
      {{x.CourseName}}
    </p>
    <image src="image({{x.CourseImage}})"></image>
    <hr>
  </div>
</div>

JavaScript

function myCtrl($scope, $timeout) {    
    AWS.config.update({
  accessKeyId: 'AKIAINDKMTLNWYQ4PBAA', secretAccessKey: 'AKIAINDKMTLNWYQ4PBAA'});
    AWS.config.region = "ap-south-1";
    
var bucket = new AWS.S3({params: {Bucket: 'alsresources'}});
    
    bucket.getObject({Key: '755de3de-ada3-45fe-b847-709a624ad2a3.png.png'},function(err,file){
        
    $timeout(function(){
        $scope.s3url = "data:image/jpeg;base64," + encode(file.Body);
    },1);
});
}

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