How to dynamically call all the images and display using *ngFor in Angular?

Question

I have many images inside an assets folder which I'm trying to display using *ngFor

*.ts

this.assetsImages = ['12.jpg', 'tt.jpg', 'an.jpg', 'pn.png'];

.html

<div *ngFor="let image of assetsImages" >
      <img src="../../assets/{{image}}" height="100px" width="100px" >
</div>

Above I'm statically writing path of the images to display. But if I have a huge number of images I'd need to hard-code all paths which is not feasible.

Is there any alternate way to display all images dynamically?

Answer 1

You can't do that with frontend. What you need to is using your back-end and return file in it.

Answer 2

try this

.ts

this.assetsImages = ['../../assets/12.jpg', '../../assets/tt.jpg', 'an.jpg', '../../assets/pn.png'];

html

<div *ngFor="let image of assetsImages" >
      <img [src]="image" height="100px" width="100px" >
</div>