时间戳

首页 > 解决方案 > *ngFor - 图片 url 数组 - 不工作

angular - *ngFor - 图片 url 数组 - 不工作

问题描述

我想通过*ngFor. 它应该显示所有不同的图像，但它只显示数组的一个和第一个图像。

至今：

private localImg:any = [];
  constructor() { }

  ngOnInit() {
    this.localImg = [     
     {id:0,name:"img0",url:'assets/img/img0.png'},
     {id:1,name:"img0",url:'assets/img/img1.png'},
     {id:2,name:"img0",url:'assets/img/img2.png'},
     {id:3,name:"img0",url:'assets/img/img3.png'},
     {id:4,name:"img0",url:'assets/img/img4.png'},     
      ]
      console.log("image", this.localImg);
  }

<div class="container-fluid" *ngFor="let img of localImg">
   <div class="row imagetiles">
        <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
            <img [src]='img.url' class="img-responsive">
        </div>
   </div>
</div>

我尝试使用[src]='img.url'并更改为获取图像[src]='img.id'，name但没有运气。

或者请向我建议任何其他更短更简单的解决方案。

非常感谢您的解决方案。

标签： angulardata-bindingngfor

解决方案

最有可能的问题是您通过这样做来引用您的路径：

url:'assets/img/img0.png'

代替：

url:'./assets/img/img0.png'

推荐阅读