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