How to dynamically load assets images on an Angular component?

Question

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?

I'm not sure what you're trying to achieve? the code you're showing works fine right? Assets are not meant to be dynamically changed, but to be static and bundled while building your application using ng build. Thus I would suggest another structure, where you have the dynamic images somewhere else, with a server serving the images, that you can then fetch them with an HTTP call from within angular. — abdullahkady
– abdullahkady, Commented Sep 13, 2018 at 17:18
from your code I can understand you are accessing from the server and also you are keeping the assets in a imageList as static — Jameel Moideen
– Jameel Moideen, Commented Sep 13, 2018 at 17:21
What I’m trying to do is load all images from a dir on a server and push it to the list, not having to put them on a static list. — Nathan Gavenski
– Nathan Gavenski, Commented Sep 13, 2018 at 22:25

Sachin Gupta · Accepted Answer · 2018-09-13 17:21:57Z

1

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.

answered Sep 13, 2018 at 17:21

Sachin Gupta

5,3493 gold badges19 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nathan Gavenski Over a year ago

which api can I use for that?

Sachin Gupta Over a year ago

You need to create an API, which will read the files and return a list of file names. You can then use the response to get the files one by one.

Nathan Gavenski Over a year ago

This I already know, that’s why I mentioned FS, but on the latest version of angular cli it isn’t working for now, do you know any other api that can navigate throw a dir and get me all files names?

Collectives™ on Stack Overflow

How to dynamically load assets images on an Angular component?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related