Angular 2图像src作为函数返回

Question

在我的角度2应用程序中，我有一个像facebook的评论系统，当用户可以评论帖子时，我必须显示消息，用户名和用户个人资料图像。

我的问题是，Web服务向我发送用户名，要显示的消息，用户的图像ID，而不是图像本身，所以我必须通过其他http调用来获取它。

CODE EXEMPLE：

app.component.ts：

<app-reviews [comment] = 'Comment| async'></app-reviews> // async is juste          an error, i know tha when use subscribe i cant use async

所以在这里我用@Input将注释传递给评论组件，评论对象包含用户名，消息和图片ID，我必须进行http调用才能获得图像。

我试图得到这样的结果：

  <div *ngFor='let com of comment'>
  <img alt="image" [src]='getUserImage(com.authorImageId)'>
   ....

但我知道这个方法可能会引起问题，因为getUserImage（）将在每个更改检测周期执行。

我怎样才能做到最好？

更新

功能代码：

 getUserImage(userImageID: string) {
this._profileService.getImageById(userImageID)
.subscribe((response: any) => {
  return  response._body;

});

Answer 1

我有同样的问题，我存储了返回的用户Image，如果用户Image不存在，img只执行该功能。

<img alt="image" [src]='userImage ? userImage :getUserImage(com.authorImageId)'>

但是你应该有一个通用的默认图像，所以在服务器创建userImage之前，图像不能被定义使用：

<img alt="image" [src]='userImage ? userImage : defaultImage'>