如何以角度显示存储在Firebase中的图像

Question

我想显示我正在使用Firebase数据库中的表单上载存储的图像。我在html中显示图片时遇到问题。错误显示为“ ERR_INVALID_URL”

根据我的研究，图像以data：image / png; base64格式存储如何在html中显示该图像？

HTML文件

<div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body" *ngFor="let image of albumImages">
           <img [src]="getSantizeUrl(image.multiImages)" />
        </div>
     </div>
</div>

TS文件

export class GalleryComponent implements OnInit {
 albumImages: IPhotos[] = [];

  constructor(private imageUpload: ImageUploadService, private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.imageUpload.getImages().subscribe((res)=> {
      this.albumImages = res;
      console.log(this.albumImages);
    });
  }
  public getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}
}

服务文件

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({ ...responseData[key], id: key })
        }
      }
      return albumArray;

    }))
  }

firebase中存储的图像应以html显示

Answer 1

首先，由于它是 data:image/png;base64 ，因此您需要使用 bypassSecurityTrustResourceUrl 而不是 bypassSecurityTrustUrl ：

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

第二， multiImages 是一个包含图像的数组。您需要指定任何项目以传递 src 属性内的URL：您无法向其传递数组，因此，如果您尝试循环并显示albumImages的所有图像，请尝试以下操作：

<div class="uk-grid-match uk-child-width-expand@s uk-text-center" uk-grid>
    <div>
        <div class="uk-card uk-card-default uk-card-body" *ngFor="let image of albumImages">
           <img *ngFor="let singleImage of image.multiImages " [src]="getSantizeUrl(singleImage)" />
        </div>
     </div>
</div>