How to properly load and bind a parameter to a img url using Ionic 3 / Angular 5?

Question

I'm loading an image from a S3 bucket in my Ionic view like this:

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

The image name I want to load is "cp1.jpg", and the client?.id value 1 is taken from the component script:

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

I'm also using the "?" operator in client?.id because if I don't, I get an "id undefined" error and the page doesn't even load.

However, I'm getting a canceled request on my Network inspector, which is trying to retrieve the image before the "1" value is concatenated in the image name:

Right after that error, the "1" value is provided to the view and the image is loaded. But I'd like to not get that undesired retrieving try.

How can I properly load and bind the client id to get the image name right, and also to avoid getting that canceled request error?

You could just have `*ngIf="client?.id"` – Explosion Pills Dec 18 '17 at 16:15 — Explosion Pills, Dec 18 '17 at 16:15

AbM · Answer 1 · 2017-12-19T03:51:13.517

0

In your html:

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

In your .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>
  }
}

edited Dec 19 '17 at 03:51

answered Dec 18 '17 at 16:16

AbM

7,326
2
25
28

1

Wouldn't this be `avatar_for_client()`? – Explosion Pills Dec 18 '17 at 16:16
Worked thanks! Another little fix: ${this.client.id}. By the way, how would I also return the placeholder image url if the bucket image doesn't exist? Thank you. – Nelio Alves Dec 18 '17 at 17:32
@NelioAlves you can listen to the `(error)` event https://stackoverflow.com/a/36430121/2697183 – AbM Dec 19 '17 at 03:52

How to properly load and bind a parameter to a img url using Ionic 3 / Angular 5?

1 Answers1