CODEWITHSUNDEEP
htmlionic-frameworkionic4
Usr
Usr

Reputation: 2838

Ionic 4 dynamic photo url isn't working - no image shown

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: enter image description here

Upvotes: 3

Views: 1938

Answers (2)

Jaykant Jha
Jaykant Jha

Reputation: 698

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

You can achieve it Using index:

Upvotes: 2

Varun Sukheja
Varun Sukheja

Reputation: 6516

This is because you can't run 2 loops in angular. So you are actually not getting the value of photo path in your variable photo. But instead you are getting the value of variable place in the variable photo.

you can check it printing the value of photo

{{photo}}

Upvotes: 0

Related Questions