But when you try to dynamically add the image using the * ngFor statement.
What is the type of data you are adding to [src] = ‘item.image’?
Is a data File or is a Base64 or an address of your image file or what type of data is it?
I also use dynamic images in my applications that consume a service and bring the information from my table which contains the image in a Base64 format and works perfectly.
Here is an example of how I use it in one of my applications.
<ion-col size="4" *ngFor="let events of global.eventsCat"> -> Data to be printed together with the image
<!-- Start Icon -->
<ion-grid class="ion-no-padding">
<ion-row>
<ion-col size="12" class="contain-center-center ion-no-padding">
<ion-button (click)="openEvent(events.titulo,events.concepto,events.icon,events.inicio_fin)"
color="light" class="custom-buttons">
<img [src]="events.icon" [alt]="events.titulo"> -> Base64 image
</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12" class="contain-center-center ion-no-padding">
<ion-label class="font-color">{{ events.titulo }}</ion-label>
</ion-col>
</ion-row>
</ion-grid>
<!-- End Icon -->
</ion-col>
Result:
I hope to be helpful