title: Returning string from observable for SRC image attribute
body: <p>I have an image service that, given the user_id, gives the id of the user's profile picture. Once I get that, I have to make another request to the Image Service that gives back the JPG image with the just received user's profile picture id.</p>
  
  <p>Fetch the image:
  <code>&lt;img [src]="getProfilePicture(1) | async"&gt;</code></p>
  
  <pre><code>
  Call to the imageService:
  getProfilePicture(user_id) {
      return this.imageService.getProfilePictureUrl(user_id);
    }
  </code></pre>
  
  <p>Return the observable that has the string-URL </p>
  
  <pre><code>getProfilePictureUrl(user_id: number) {
      return this.getProfilePicture(user_id).pipe(map((data) =&gt; this.getImageUrl(data['image_id'])));
    }
  </code></pre>
  
  <p>Hard-coded string-URL:</p>
  
  <pre><code>getImageUrl(id: number) {
      return `${this.url}/fetch/${id}`;
    }
  </code></pre>
  
  <p>But now, I get an infinite loop of requests (because I alsways return another observable) but I don't know how to fix this.</p>
  
  <p>Thanks in advance!</p>