Question

我有一些代码旨在显示用户个人资料图片，默认图片或用户上传的图片。现在，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代码段以上传个人资料图片

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

Answer 1

您将profileImage作为String数组，并且[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]">

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

1 个答案: