Angular 2图像src作为函数返回

Question

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

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

在这种情况下，我无法显示配置文件图像，我认为html在数据之前加载？任何帮助？

Answer 1

如果解析图像url的web服务返回一个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) />