Displaying image buffer from S3 in Angular view

问题

I am trying to display an image I fetched from S3 in my angular view. I am getting the image as buffer from S3.

I have tried passing the buffer as img src but that did not help me in displaying image.

import * as AWS from 'aws-sdk';
import * as S3 from 'aws-sdk/clients/s3';

@Component({
  selector: "app-Mycomp",
  templateUrl: "mycomp.component.html"
})

export class MyComponent implements OnInit {
  imageSrc : any;
 ngOnInit() {
   this.displayMyFile()
}

displayMyFile() {
    let accessKeyId = MyAccessKey
    let secretAccessKey = MySecretAccessKey;
    let region = MyRegion;
    AWS.config.update({ accessKeyId: accessKeyId, secretAccessKey: secretAccessKey, region: region });
    let s3 = new AWS.S3({ apiVersion: version });
    const params = {
      Bucket: 'aNewBucket',
      Key: 'image.jpg'
    }
    s3.getObject(params, (err,data) => {
      if (err) console.log(`Error in fetching image ${err}`)
      else {
        console.log(`data from s3 ${(JSON.stringify(data))}`);
       this.imageSrc = data.Body
      }
    })
}
}

mycomp.component.html

<div>
<img id = 'img1' src="data:image/jpg;{{imageSrc}}">
</div>

The data logged is like following :

{"LastModified":"2019-08-13T13:15:18.000Z","ContentLength":276780,"ContentType":"image/jpg","Metadata":{},"Body":{"type":"Buffer","data":[255,216,255,225,0,24,69,120,105,102,0,0,73,73,42,0,8,0,0,0,0,0,0,0,0,0,0,0,255,236,0,17,68,117,99,107,121,0,1,0,4,0,0,0,80,0,0,255,225,3,29,104,116.......]

As it is seen that the image buffer is fetched. Can anyone please suggest what is the correct way to implement this.

来源：https://stackoverflow.com/questions/57490398/displaying-image-buffer-from-s3-in-angular-view

标签

html

angular

amazon-s3