如何从列表中的每个项目获取真实图像值并将其订阅到另一个列表？

我有一个服务列表，该服务具有多个属性，例如使用Spring REST API从数据库调用的serviceId，serviceName和photoProfile。

“ photoProfile”属性仅具有个人资料图片的ID，如果您使用“ localhost：8082 / downloadFile /” + photoProfile，则会获得图像，该图像又存储在spring项目的文件夹中。

在网上寻找了一会儿之后，我发现了如何真正地将真实图像显示在我的网站上，但是现在我陷入了困境，因为我需要对整个列表进行此操作。

这是我的角度代码：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LoginComponent } from '../login/login.component';
import { UserService } from '../user.service';
import { Observable, forkJoin } from 'rxjs';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { combineLatest } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  loggedIn: boolean;
  services: any[] = [];
  imgSrc: any;
  newList: any[] = [];
  constructor(private router: Router, private service: UserService, private http: HttpClient) {
  }

  ngOnInit() {
    this.service.getServices().subscribe(res => {
    this.services = res;
    console.log('services: ', this.services);
});
    for (let i = 0; i < this.services.length; i++) {
      const element = this.services[i];
      this.getImage('http://localhost:4200/downloadFile/' + element.photoProfile).subscribe(data => {
      this.createImageFromBlob(data);
    });
    this.newList.push(this.imgSrc);
    console.log(this.newList);
    //I want to add the element from the services list and the image value after being converted to the new list
    }
  }

  getImage(imageUrl: string): Observable<Blob> {
    return this.http.get(imageUrl, {responseType: 'blob'});
  }

  createImageFromBlob(image: Blob) {
    const reader = new FileReader();
    reader.addEventListener('load', () => {
      this.imgSrc = reader.result;
    }, false);
    if (image) {
      reader.readAsDataURL(image);
    }
  }
}

感谢您的帮助。