How to insert automatically img

Ionic Framework ionic-v3
1

hellos
I want to insert images automatically into a file.html by creating a table in my file.ts containing a list of all my images that I have to insert in my view.
thank you.

2

please help me to find the solution

3

Hello @thiokoto, assuming you have some array in .ts file named as items which have images url, you can use it as follows:

<div *ngFor="let item of items">
  <img src={{item.yourImage}}>
</div>

Hope this will help you, let me know if you have any confusion.
Cheers!!!

4

at file.html I do not have a problem. But it’s in the construction of the painting that I have a problem:
I write:
item = [ ];

this.item = [
{
title: ‘recette a base d’avocat’,
description: ‘a description’,
image: assets / imgs / lawyer.jpg
}
{
title: ‘recette a base de carotte’;
description: ‘a description’,
image: ‘assets / imgs / carotte.jpg’
}
]
nothing is displayed in the image when i do

<button ion-item *ngFor=“let item of items” (click)=“openDetailsPage(item)” icon-start>

  <ion-avatar  item-start>
     <img src={{item.image}}>
    </ion-avatar>
  {{ item.title}}  
</button>
5

Hi, @thiokoto

item = [ ];

this.item = [
{
title: ‘recette a base d’avocat’,
description: ‘a description’,
image: assets / imgs / lawyer.jpg
}
{
title: ‘recette a base de carotte’;
description: ‘a description’,
image: ‘assets / imgs / carotte.jpg’
}
]

Here the name of an array is item but in html you have iterate with items name.

6

Hello,

maybe your path is not correct. If

image: ‘assets / imgs / carotte.jpg’

is a copy of your code, then this path contains white spaces.
Crome developer tools should show you for example in network waterfall a problem. Compare paths how it is and how it should be.

Best regards, anna-liebt

7

This has happened with me once. Even with correct path, images appear broken (even in browsers).

To solve this try any one of followings -

<button *ngFor="let obj of item">
   <ion-avatar  item-start>
     <img [src]="obj.image">
   </ion-avatar>
  {{ obj.title}}  
</button>

For external images -

<button *ngFor="let obj of item">
   <ion-avatar  item-start>
     <img [src]="this.properIP + obj.image">
   </ion-avatar>
  {{ obj.title}}  
</button>
8

thank you all.
I tried your solution @sujit77 and everything is fine.
thanks again