Как визуализировать пошаговые изображения, взятые из базы данных

Question

В проекте, который я делаю, есть часть, которая включает рендеринг изображений, взятых из базы данных. Одно изображение отображается без проблем, но когда я пытаюсь постепенно отобразить все строки из базы данных, возникает проблема:

main.component.ts

homeDetails() {

this.info.getHomeDetails().subscribe(

     gethomedetails =>  {

                    this.id = gethomedetails[0].id;
                    this.picByte = gethomedetails[0].picByte;

                 // for ( let i=0; i<=gethomedetails.length; i++) {
                  // this.id = homedetails[0].id;
                   this.picByte = gethomedetails[i].picByte;
                  this.id = gethomedetails[i].id;
                  console.log("id" + this.id);
                 // this.picByte = homedetails[i].picByte;
                 // }
                  this.retrievedImage = 'data:image/jpeg;base64,' + this.picByte;
                 // }
                  console.log("retrievedimage" + this.retrievedImage);

                  // for (let i=0; i<=this.id; i++) {

                  //   console.log("id" + i);
                  // }

                  // for (let i=0; i<=this.id; i++) {

                  //   this.picByte = homedetails[i].picByte;

                  // this.retrievedImage = 'data:image/jpeg;base64,' + this.picByte;
                  // console.log("retrievedimage" + this.retrievedImage);
                  // }

                  // this.images = homedetails
      }
)

   // return this.domSanitizer.bypassSecurityTrustResourceUrl(this.retrievedImage);
  }

main .component. html

 <img [src]="retrievedImage">    works just for one file

Не могли бы вы указать мне, как я должен это сделать?

Спасибо.

Answer 1

Вы можете сделать это простым способом:

homeDetails() {
  this.info
    .getHomeDetails()
    .subscribe(data =>
        this.images = data.map(data => (
          {
            id: data.id,
            src: 'data:image/jpeg;base64,' + data.picByte
          }
        )
    )
}

А затем в HTML

<div *ngFor="let image of images">
    <img [src]="image.src">
</div>