Angular 从SRC image属性的observable返回字符串

我有一个图像服务，在给定用户id的情况下，提供用户个人资料图片的id。一旦我得到它，我必须向图像服务发出另一个请求，该服务将返回带有刚刚收到的用户配置文件图片id的JPG图像

获取图像：

Call to the imageService:
getProfilePicture(user_id) {
    return this.imageService.getProfilePictureUrl(user_id);
  }

返回具有字符串URL的可观察对象

getProfilePictureUrl(user_id: number) {
    return this.getProfilePicture(user_id).pipe(map((data) => this.getImageUrl(data['image_id'])));
  }

硬编码字符串URL:

getImageUrl(id: number) {
    return `${this.url}/fetch/${id}`;
  }

但是现在，我得到了一个无限循环的请求（因为我总是返回另一个可观察的），但我不知道如何解决这个问题

---

提前谢谢

在组件中添加一个变量

profilePicture : any;

更新方法

getProfilePicture(user_id) {
    return this.imageService.getProfilePictureUrl(user_id).subscribe(data => {
          this.profilePicture = data;
    }
  }

HTML

只需将可观察到的内容（或图像url本身）存储在组件或组件显示的用户对象中即可。感谢您的回复，但图像周围有一个循环。这是一个用户对帖子评论的循环。所以每个评论都有一个配置文件图片，你可以发布你的HTML来提问吗？你应该从组件返回对象列表，并且只在视图中使用ngFor来显示Yes，但这是不可能的。我首先从第一个服务获取数据，然后使用这些ID获取属于第一个ID的图像ID，最后使用这些ID获取相应的图像。

<img [src]="profilePicture">