Parsing images from Fileservice into Slider in Angular component

I am working on an Angular application in which I have a working fileservice that is displaying images and other information; now, I would like to display the images from that fileservice in the NgBootstrap Carousel. The problem that I am having is that I don´t really know how to map the images from the fileservice to the property bindings in the template of the NgBootstrap Carousel.

This is my component:

import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap';
import { NgIf } from '@angular/common';
import { Component, OnInit, TemplateRef } from '@angular/core';
import { first } from 'rxjs/operators';
import { FileService, PaymentService } from '../app/services';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { FormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
    selector: 'ngbd-carousel-basic',
    standalone: true,
    imports: [NgbCarouselModule, NgIf],
    templateUrl: './carousel-basic.html',
})
export class NgbdCarouselBasic {

This is the array which is now filled with the images on display, but should be filled with the images from the fileservice:

    images = [944, 1011, 984].map((n) => `https://picsum.photos/id/${n}/900/500`);

  public data: any = [];
  modalRef?: BsModalRef;
  paymentForm: UntypedFormGroup;

  public list
  constructor(
    private fileService: FileService,
    private paymentService: PaymentService,
    private modalService: BsModalService,
    private router: Router,
  ) {
    this.data = []
  }

  ngOnInit() {
    this.fileService.fileList()
    .pipe(first())
    .subscribe(
      (list) => {
        this.data = list;
        //console.log('logging list',list);
        this.data.forEach((e1,i) => {
          e1.index = i;
          //console.log(e1.bytecode)
        });
      },
      (error) => {
        if (error.error.error?.verifyUser) {
        } else {}
      }
    );
  }

  openModal(template: TemplateRef<any>, list:any) {
    console.log(list);
    this.list = list; // Dynamic Data
    this.modalRef = this.modalService.show(template);
  }

  callNextPage(template: TemplateRef<any>, list:any) {
    console.log(list);
    console.log('Next page called');
    this.list = list; // Dynamic Data
    this.modalRef = this.modalService.show(template);
  }

  deny(template: TemplateRef<any>,index){
    console.log('called');
    this.modalRef.hide();
    if(this.data[index+1]){
      this.list = this.data[index+1]; // Dynamic Data
      this.modalRef = this.modalService.show(template);
    }
  }
  
  payment() {
    this.paymentService
      .getPaymentLink()
      .pipe(first())
      .subscribe(
        (links: any) => {
          if (links) {
            let paymentLink = links.links.find(x => x.rel === 'approve');
            // this.router.navigate([paymentLink]);
            window.location.href = paymentLink.href
          }
        },
        (error) => {
          if (error.error.error?.verifyUser) {
            // this.openDialog(error.error.error?.user);
          } else {}
        }
      );
  }
}

This is the Carousel template where the images from the fileservice should appear:

<ngb-carousel *ngIf="images">
    <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
            <img [src]="images[0]" alt="Random first slide" />
        </div>
        <div class="carousel-caption">
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </div>
    </ng-template>
    <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
            <img [src]="images[1]" alt="Random second slide" />
        </div>
        <div class="carousel-caption">
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </ng-template>
    <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
            <img [src]="images[2]" alt="Random third slide" />
        </div>
        <div class="carousel-caption">
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
        </div>
    </ng-template>
</ngb-carousel>

This is the template html, where the images from the fileservice do appear and everything works fine:

<div class="animated fadeIn">
    <div class="card">
        <div class="card-header">
            <i class="fa fa-align-justify"></i> Image List
        </div>
        <ng-template #template>
            <div class="modal-header">
                <h3>{{list.platform}}</h3>
                <button type="button" class="btn-close close pull-right" aria-label="Close" (click)="modalRef?.hide()">
              <span aria-hidden="true" class="visually-hidden">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                <div>
                    <p>{{list.keyword}}</p>
                </div>
                <div style="text-align: center;">
                    <img style="border:1px solid gray;max-width:450px; max-height: 350px;"
                    src="data:image/png;base64,{{list.bytecode}}" />
                </div>
                <div style="text-align: center; padding-top: 2%;">
                    <!-- <form [formGroup]="paymentForm" > -->
                    <button class="btn btn-success" type="button" (click)="payment()">Accept</button>
                    <!-- </form> -->
                    <button class="btn  btn-danger" (click)="deny(template,list.index)">Deny</button>
                </div>
            </div>
        </ng-template>
    </div>
</div>

As I am really stuck with this, any hints or help would be very much appreciated, thanks in advance.

You can make the below change in HTML

<img [src]="images[0]" />

to

<img [src]="'data:image/png;base64,' + list.bytecode"/>

where list.bytecode is base64 encoded image which you are receiving from your fileService

I've updated the NgBootstrap Carousel example here Stackblitz. The first image is coming from a hardcoded base64 string. This mimics the data you get from fileService, the remaining images are coming from a URL.