how to use variable in image src ionic

Question

how can i use {{ }} in src of a image? i got error with this code near [src]

    <ion-list>
  <ion-item *ngFor="let item of results| async">
    <ion-thumbnail slot="start">
      <ion-img [src]={{ item.qrlink }}></ion-img>
    </ion-thumbnail>
    <ion-label>{{ item.Title }}</ion-label>
  </ion-item>
</ion-list>

in the page.ts i have this code:

 submit_newcheck()
  {
  this.results = this.encryptionService.newcheck(this.checkid,this.cost,this.toname,this.tocode,this.passcode,this.date );

  }

which is connected to a service like this:

export class EncryptionService {
     constructor(private http: HttpClient) { }

    newcheck(checkid: string ,cost: string,toname: string,tocode: string,passcode: string,date: string): Observable<any> {
    return this.http.get(`https://api.test.com/encrypte.php?checkid=${encodeURI(checkid)}&&cost=${encodeURI(cost)}&&toname=${encodeURI(toname)}&&tocode=${encodeURI(tocode)}&&passcode=${encodeURI(passcode)}&&date=${encodeURI(date)}`).pipe(
      map(results => results['Data'])
    );
  }
}

Barremian · Accepted Answer · 2020-03-31 12:35:28Z

4

It should be either be [src]="item.qrlink" or src={{ item.qrlink }}. They aren't supposed to be mixed together.

Explanation

In case of [src]="item.qrlink" the value of variable item.qrlink is bound to the [src] property using property binding. Read up more on template expression here.

In case of src={{ item.qrlink }} the value item.qrlink is interpolated and assigned to the attribute src. Read up more on interpolation here.

edited Mar 31, 2020 at 12:35

answered Mar 31, 2020 at 12:27

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to use variable in image src ionic

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related