0

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.

Manu Jha
  • 55
  • 7
  • A. Seems like it should be `this.imageSrc = data.Body.data`. B. Seems like [that](https://stackoverflow.com/a/20756091/863110) answer explain how to present image from byte array. – Mosh Feu Aug 14 '19 at 08:02
  • I tried setting this.imageSrc = data.Body.data but it shows me an error saying, "Property 'data' does not exist on type 'Body' ". – Manu Jha Aug 14 '19 at 09:32
  • It doesn't make sense if `data` does looks like you showed in the question. It's simple object.. – Mosh Feu Aug 14 '19 at 11:00

0 Answers0