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

Posted 2023-03-13

【中文标题】为啥 <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>

TS

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">吗？

是的，没用

【参考方案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]">