如何在Angular组件上动态加载资产图像？

Question

我的页面上有轮播，我一直试图动态加载其图像。代码如下：

 <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一起使用，并且存在一个已知问题，在此版本的webpack中，不允许我们使用'fs'，'os'和其他功能。

现在我正在使用：

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

但是我想为此创建一个函数，该函数会将所有图像推送到此列表的目录中。 还有其他解决方案吗？

Answer 1

您可以进行api调用，该调用可以为您提供目录中文件的列表。您可以使用响应更新imagesList。