如何以角度显示存储在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>