Возвращение строки из наблюдаемого для атрибута изображения SRC

Question

У меня есть сервис изображений, который, учитывая user_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">