Question

我有一些代码旨在显示默认的用户个人资料图片或用户刚刚上传的个人资料图片，但是默认图片不会显示在div中，只有在用户上传自己的个人资料图片后，他们的图像显示。

我可以在网格外部看到默认图像。

<ion-content>
 <ion-grid style ="text-align: center">
  <ion-row >
 <ion-col *ngFor="let item of students" >
     <div  class= "imageHold" >
         <img [src]= "profileImage"> 
     </div>
 </ion-col>  
</ion-row >
<ion-row  style ="text-align: center">  
    <ion-col>
 <ion-button  size="small" fill="outline" (click)="chooseProfilePic()" >Choose Profile Photo</ion-button>
</ion-col>
</ion-row>
</ion-grid>

TS

this.profileImage =  ["./assets/imgs/user.png"];
    this.profileService.read_Students().subscribe(data => {

      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);

    });

  }

ts的Firebase代码段

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

Answer 1

profileImage不能是字符串而不是数组吗？像这样：

this.profileImage = "./assets/imgs/user.png";?

根据Ionic文档，您还应该使用： <ion-img [src]="profileImage"></ion-img>

img src未显示在ngFor循环内

1 个答案: