为什么<img [src]>没有显示在<离子列>内，带有*ngFor 循环？

Question

我有一些代码旨在显示用户配置文件图像，无论是默认图像还是用户上传的图片。现在，img[src]="profileImage"显示图像本身非常精细。然而，当我把它放在离子池里时，它并没有显示出来。

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

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作为字符串数组，[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]">