Как динамически загружать изображения ресурсов в компонент angular?

У меня на странице есть карусель, и я пытался динамически загружать ее изображения. Код выглядит следующим образом:

 <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>

Моя проблема в том, что каждое решение, которое я могу найти, использует «fs». Я использую Angular 6 с последней версией Angular Cli, и есть известная проблема, что в этой версии веб-пакет не позволяет нам использовать «fs», «os» и другие функции.

на данный момент я использую:

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

Но я хотел бы создать для этого функцию, которая будет помещать все изображения в каталог в этом списке. Есть ли другое решение?

Я не уверен, чего вы пытаетесь достичь? код, который вы показываете, работает нормально? Ресурсы не предназначены для динамического изменения, а должны быть статичными и объединенными при создании вашего приложения с использованием ng build. Таким образом, я бы предложил другую структуру, где у вас есть динамические изображения где-то еще, с сервером, обслуживающим изображения, который вы затем можете получить с помощью HTTP-вызова из angular.

abdullahkady 13.09.2018 19:18

доступ с клиентской машины или сервера?

Jameel Moideen 13.09.2018 19:19

из вашего кода я могу понять, что вы получаете доступ с сервера, а также сохраняете активы в imageList как статические

Jameel Moideen 13.09.2018 19:21

Я пытаюсь загрузить все изображения из каталога на сервере и поместить их в список, не помещая их в статический список.

Nathan Gavenski 14.09.2018 00:25
1
4
1 127
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

У вас может быть вызов api, который может предоставить вам список файлов из каталога. Вы можете обновить imagesList, используя ответ.

какой api я могу использовать для этого?

Nathan Gavenski 13.09.2018 22:23

Вам нужно создать API, который будет читать файлы и возвращать список имен файлов. Затем вы можете использовать ответ для получения файлов по одному.

Sachin Gupta 13.09.2018 22:40

Это я уже знаю, поэтому я упомянул FS, но в последней версии angular cli он сейчас не работает, знаете ли вы какой-либо другой api, который может перемещаться по каталогу и получать имена всех файлов?

Nathan Gavenski 14.09.2018 00:23

Другие вопросы по теме