为什么 <img [src]> 没有在带有 *ngFor 循环的 <ion col> 内部显示？答案

【问题标题】：why isn't <img [src]> not showing inside of <ion col> with *ngFor loop?为什么 <img [src]> 没有在带有 *ngFor 循环的 <ion col> 内部显示？
【发布时间】：2020-03-16 17:53:51
【问题描述】：

我有一些代码旨在显示用户个人资料图片，无论是默认图片还是用户上传的图片。现在，img [src]="profileImage" 单独显示图像非常好。但是，当我将其放入 ion-col 时，它不会显示。

下面是我正在使用的以下代码

HTML

 <ion-col *ngFor="let item of students" >
     <div  class= "imageHold" >
         <img [src]= "profileImage"> 
     </div>
 </ion-col>

export class EditProfilePage implements OnInit {



  profileImage : any;

  ngOnInit() {
  this.profileImage =  ["./assets/imgs/user.png"]

this.students = data.map(e => {
        return {
          id: e.payload.doc.id,
          isEdit: false,
          userName: e.payload.doc.data()['userName'],
          userBio: e.payload.doc.data()['userBio'],
          profileImage: e.payload.doc.data()['profileImage'],
        };
      })
      console.log(this.students);

    }

firebase 代码 sn-p 上传个人资料图片

  this.firebaseService.uploadImage(image_src, randomId)
    .then(photoURL => {
      this.profileImage = photoURL;
      loading.dismiss();
      toast.present();

【问题讨论】：

在ion-row里面吗？
你试过<img [src]= "item.profileImage">吗？
是的，没用

标签： html typescript ionic-framework ionic4

【解决方案1】：

你有 profileImage 作为字符串数组，并且 [src] 只接受字符串

这样试试

this.profileImage =  "./assets/imgs/user.png"; //don't declare this as string

或者如果你有多个图像，那么尝试使用索引

this.profileImage =  ["./assets/imgs/user.png","./assets/imgs/user1.png"]

在html中

 <img [src]= "profileImage[0]">

【讨论】：