Angular 2 image src as function return

Question

在我的Angular 2应用程序中，我有一个用户列表“用户：任何”包含属性：名称，工作，年龄等等，问题是要获取配置文件图像我必须获取id来自Users对象的图像，然后使用web服务getImage（ImageId），所以我在我的html中有这个

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

在这种情况下，我无法显示配置文件图像，我认为html是在数据之前加载的？有什么帮助吗？

Answer 1

如果解析图片网址的网络服务返回一个Observable，则必须解决它。因此，要使用方法来完成此操作，您可以使用异步管道：

组件：

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

模板：

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

Answer 2

只需尝试一下，这对我有用。

TS：

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

HTML：

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