Ionic v4 dynamic images url doesn't work

In my app I’m doing this:

<ion-col *ngFor ="let place of intentList, let photo of photoList">
        <ion-card>
          <ion-card-content>
          <img class="img" src = "{{photo}}" (click)="clickedImage(place.intent)">
          <div>{{place.val}}</div>
          </ion-card-content>
        </ion-card>
      </ion-col>

the array photoList contains strings with different photo url. This is the array:

this.photoList = ["./assets/images/001-breakfast.png", "./assets/images/002-brunch.png", "./assets/images/003-sandwich.png",
      "./assets/images/004-food.png", "./assets/images/005-dinner.png", "./assets/images/006-cake.png", "./assets/images/007-cocktail.png"]

But this is what my app looks like:

23

Hi @MaryCooperGD :wave:

I don’t think you can have two variable declarations (let ... of ...) in one ngFor. If both arrays have the same length, you can merge them before or you can use the index of one array to access the corresponding element of the other array. For example:

      <ion-col *ngFor="let place of intentList; let i = index">
        <ion-card>
          <ion-card-content>
          <img class="img" src="{{ photoList[i] }}" (click)="clickedImage(place.intent)">
          <div>{{ place.val }}</div>
          </ion-card-content>
        </ion-card>
      </ion-col>

Best,
Rodrigo