Question

我有一个图像服务，给定了user_id，它给出了用户个人资料图片的ID。一旦知道了这一点，我就必须向图像服务发出另一个请求，该请求将返回带有刚刚接收到的用户个人资料图片ID的JPG图像。

获取图像： <img [src]="getProfilePicture(1) | async">


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}`;
  }

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

谢谢！

Answer 1

在组件中添加变量

profilePicture : any;

更新方法

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

HTML

<img [src]="profilePicture">

从可观察到的SRC图像属性返回字符串

1 个答案: