显示来自Firebase的图像时获取http：// localhost：4200 / undefined

Question

我想显示存储在Firebase中的图像，但由于GET http：// localhost：4200 / undefined 404（未找到）而出现错误

我尝试将条件添加为* ngIf =“ albumImages.userImage！== undefined”，该错误消失了，但图像仍未显示。

HTML文件

<h1>Your Gallery</h1>
<div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid>
    <div *ngIf="albumImages.length > 1">
            <div class="uk-card uk-card-hover uk-card-body">
                    <img  [src]="getSantizeUrl(albumImages.userImage)" width="180" class="uk-margin-large-left uk-margin-medium-top" />
            </div>

        <div class="uk-flex" *ngFor="let image of albumImages">
            <div class="uk-card uk-card-hover uk-card-body" *ngFor="let singleImage of image.multiImages">
                    <img [src]="getSantizeUrl(singleImage)" width="180" class="uk-margin-large-left uk-margin-medium-top" />
            </div>

        </div>
     </div>
</div>

TS文件

ngOnInit() {
    this.imageUpload.getImages().subscribe((res)=> {
      this.albumImages = res;
      console.log(this.albumImages);
    },
    error => {
      this.error = error.message,
      console.log(error);

    } 
    );
  }
  public getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

单个文件上传表单组件TS文件

ngOnInit() {
    this.initForm();
  }
  initForm() {
    this.singleImageForm = this.fb.group({
      imageName : ['', Validators.required],
      uploadDate: [''],
      userImage: ['', Validators.required]

    });

  }
  public getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}


  /* Preview Single Image Function */

  onFileUpload(event:any) {
    const reader = new FileReader();

    if (event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);
      reader.onload = () => {
        this.singleImageForm.patchValue({
          userImage: reader.result
        });
        this.url = event.target.files;

      };
  }
  else {
    UIkit.notification({message:'Only Single Image can be uploaded', status: 'danger'});
  }
}
  onSubmit() {
    this.imageUpload.singleImageSubmit(this.singleImageForm.value).subscribe((res) => console.log(res))
    UIkit.notification({message: 'Image Uploaded Successfully', status: 'success'});
  }

}

服务档案

getImages() {
    return this.http.get<{[key: string]: IPhotos}>('https://angularimageupload-3f681.firebaseio.com/.json').pipe( map (responseData => {
      const albumArray: IPhotos[] = [];
      for(const key in responseData) {
        if(responseData.hasOwnProperty(key)) {
          albumArray.push({  id: key, ...responseData[key] })
        }
      }
      return albumArray;

    }))
  }

图片应显示在Firebase中。

Answer 1

您有2个数组。 在第一个数组中没有userImage 。 这样就会发生undefined错误。 试试下面的代码。 我希望它能解决

 <h1>Your Gallery</h1> <div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid> <div *ngFor="let image of albumImages"> <div class="uk-card uk-card-hover uk-card-body" *ngIf="image.userImage"> <img [src]="getSantizeUrl(image?.userImage)" width="180" class="uk-margin-large-left uk-margin-medium-top" /> </div> <div class="uk-flex"> <div *ngIf="image?.multiImages"> <div class="uk-card uk-card-hover uk-card-body" *ngFor="let singleImage of image.multiImages"> <img [src]="getSantizeUrl(singleImage)" width="180" class="uk-margin-large-left uk-margin-medium-top" /> </div> </div> </div> </div> </div>