Angular 2 src image as return function

Question

In my Angular 2 application, I have a list of users: Users: any, which contain properties: name, work, age ... etc., the problem is that in order to get a profile image I need to get the image identifier from of the Users object, then use the getImage web service (ImageId), so I have this in my html

<div *ngfor="let user of users"> <img [src]="getImage(user.profileImageId)"/> 

In this case, I can’t get the profile picture, I think html is loading before the data? any help?

Answer 1

Just try this, it worked for me.

TS:

  getImage(id){ return http.get(url/id); } 

HTML:

 <img [src]="getImage(user.profileImageId)" /> 

Answer 2

if the web service resolving the image URL returns Observable, you must solve it. Therefore, to use the method for this, you can use the asynchronous channel:

component:

 getImage(id): Observable<string> { return http.get(url/id); } 

Template:

 <img [src]="getImage(user.profileImageId) | async" />