*ngFor - 图像 url 数组 - 不工作

Question

我想通过 *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 但没有成功。

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

非常感谢您的解决方案。

Answer 1

我用这个实现创建了一个新项目：

App.component

import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      imgList: any[] = []

      constructor(){
        this.imgList = [
          {id: 1, path:"./assets/1.jpeg"},
          {id: 2, path:"./assets/2.jpeg"},
          {id: 3, path:"./assets/3.jpeg"}
        ];
      }
    }

App.component.html

<div *ngFor="let i of imgList">
  <img [src]="i.path" style="width:100px">
</div>

项目结构：

这是结果：

由于我看到的唯一问题是路径，您确定图像路径正确吗？另外，图片有效吗？

Answer 2

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

url:'assets/img/img0.png'

而不是：

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

*ngFor - 图像 url 数组 - 不工作

*ngFor - array of image urls - not working

data-binding

ngfor

angular