CODEWITHSUNDEEP
angulartypescriptangular-cli
Nathan Gavenski
Nathan Gavenski

Reputation: 263

How to dynamically load assets images on an Angular component?

I have carousel on my page the I've been trying to load it's images dynamically. The code is as follows:

 <div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      <div *ngFor="let image of imagesList; let isFirst = first" class="carousel-item" [class.active]="isFirst">
        <img class="d-block w-100" src="{{image}}" alt="slide">
      </div>
    </div>
  </div>

My problem is that every solution that I can find uses 'fs'. I'm using Angular 6 with the latest Angular Cli, and there is a know issue that on this version webpack don't let us use 'fs', 'os' and other features.

for the time now I'm using:

 public imagesList = [
    '../../../assets/img/home/DSC_0501.JPG',
    '../../../assets/img/home/DSC_0211.JPG'
  ];

But I would like to create a function for this, that would push all images on a dir on this list. Is there any other solution?

Upvotes: 1

Views: 2164

Answers (1)

Sachin Gupta
Sachin Gupta

Reputation: 5301

You can have a api call that can provide you with the list of files from the directory. You can update the imagesList using the response.

Upvotes: 1

Related Questions