CODEWITHSUNDEEP
javascripthtmlarraysionic-frameworkionic3
Mike Otharan
Mike Otharan

Reputation: 953

How to put an image in the Thumbnail List Ionic with array?

I have the following Array.
This is my home.ts

initializeItems() {
this.items = [
  {nome:'Abaeté', rua:'text' , 
   imagem:"assets/img/4Wj6RBrjQPGiTMhV6T9W_Abaete.JPG"}
 ];
}

And here I have the code home.html where is my ion-list

    <ion-list>
      <ion-item *ngFor="let item of items">
        <ion-thumbnail item-left>
          <img src="assets/img/4Wj6RBrjQPGiTMhV6T9W_Abaete.JPG" />
        </ion-thumbnail>
        {{ item }}
      </ion-item>
    </ion-list>

But on my ion-list the name and image are not going!
Here's an example image Example

Upvotes: 0

Views: 3772

Answers (1)

Sergey Rudenko
Sergey Rudenko

Reputation: 9227

So you need to do the "mapping" correctly here:

<ion-list>
  <ion-item *ngFor="let item of items">
    <ion-thumbnail item-left>
      // use property binding like this, question mark in case the item is not available:
      <img [src]="item?.imagem"/>
    </ion-thumbnail>
    {{ item?.nome }}
  </ion-item>
</ion-list>

The way it work is that with ngFor directive you "iterate" over array like structures (array in your case):

[
  { // this will be "item", which properties you access using item.property
    nome:'Abaeté', 
    rua:'text', 
    imagem:"assets/img/4Wj6RBrjQPGiTMhV6T9W_Abaete.JPG"
  }
]

Upvotes: 1

Related Questions