时间戳

首页 > 解决方案 > 如何在 Angular 组件上动态加载资产图像？

angular - 如何在 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 Cli 的 Angular 6，并且有一个已知问题是在这个版本的 webpack 上不要让我们使用 'fs'、'os' 和其他功能。

目前我正在使用：

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

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

标签： angulartypescriptangular-cli

解决方案

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

推荐阅读