如何在Angular中使用* ngFor动态调用所有图像并显示？

Question

我正在尝试使用*ngFor显示资产文件夹中的许多图像

* .TS

this.assetsImages = ['12.jpg', 'tt.jpg', 'an.jpg', 'pn.png'];

html的

<div *ngFor="let image of assetsImages" >
      <img src="../../assets/{{image}}" height="100px" width="100px" >
</div>

在上面，我静态地写了要显示的图像的路径。 但是，如果我有大量的图像，则需要对所有路径进行硬编码，这是不可行的。

有没有其他替代方法可以动态显示所有图像？

Answer 1

您无法使用前端做到这一点。 您需要使用后端并在其中返回文件。

Answer 2

尝试这个

.TS

this.assetsImages = ['../../assets/12.jpg', '../../assets/tt.jpg', 'an.jpg', '../../assets/pn.png'];

HTML

<div *ngFor="let image of assetsImages" >
      <img [src]="image" height="100px" width="100px" >
</div>