如何使用 Ionic 3 / Angular 5 正确加载参数并将其绑定到 img url？

Question

我正在 Ionic 视图中从 S3 存储桶加载图像，如下所示：

<ion-avatar>
  <img class="circle" src="https://s3-sa-east-1.amazonaws.com/mybucket/cp{{client?.id}}.jpg">
</ion-avatar>

我要加载的图片名称是“cp1.jpg”，client?.id值1取自组件脚本：

ionViewDidLoad() {
  let email = this.storage.getLocalUser().email;
  this.clientService.findByEmail(email)
    .subscribe(resp => {
      this.client = resp;
    },
    error => {
      console.log(error);
    });
}

我也在使用“？”客户端中的操作员？

但是，我的网络检查器收到了一个已取消的请求，它试图在图像名称中连接“1”值之前检索图像：

在该错误之后，“1”值被提供给视图并加载图像。但我不想进行那种不受欢迎的检索尝试。

如何正确加载和绑定客户端 ID 以获取正确的图像名称，并避免出现取消请求错误？

Answer 1

在您的 html 中：

<ion-avatar>
  <img class="circle" [src]="avatar_for_client()">
</ion-avatar>

在你的.ts:

avatar_for_client(){
  if (this.client){
    return `https://s3-sa-east-1.amazonaws.com/mybucket/cp${this.client.id}.jpg`
  }else{
    return <some placeholder image url>
  }
}