如何在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>