Question

在模板中给定文件路径的情况下，如何显示Firebase存储文件。可以说我在数组中有文件路径。是否可以做这样的事情：组件类函数

downloadFile(file){ return this.storage.ref(file).downloadURL()}

然后在ngFor模板中...

<div *ngFor="let file in files"> <img src="downloadFile(file)"> </div>

我尝试过，但是我的页面冻结了...

Answer 1

downloadURL函数返回一个Observable。因此，您将无法做到这一点。

但是您可以创建两个数组。其中一个可观察值，另一个用于实际下载URL。然后，您可以在downloadURLObservables数组上应用forkJoin运算符，以获取实际的下载URL。

这就是代码中的样子：

// import forkJoin from here.
import { forkJoin } from 'rxjs/observable/forkJoin';

// declare arrays for storing observables and download url strings;
downloadUrlObservables: Observable<string>[];
downloadUrls: string[];



// map the files to get the download urls in the observable array.
downloadUrlObservables = this.files.map(file => this.storage.ref(file).downloadURL());

// apply a forkJoin to get all the download urls at once.
forkJoin(this.downloadUrlObservables).subscribe(downloadUrls => this.downloadUrls = downloadUrls);

然后，您可以像这样在模板中使用downloadUrls数组：

<div *ngFor="let downloadUrl in downloadUrls"> <img [src]="downloadUrl | safe: 'url'"> </div>

如果您收到DOM清理错误，则可能必须清理图像标签的src网址。

要解决此问题，您可以创建一个做到这一点的Angular Pipe。

这是该管道courtesy this medium article的通用实现：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml, SafeStyle, SafeScript, SafeUrl, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) { }

  public transform(value: any, type: string): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
      case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
      case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
      case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default: throw new Error(`Invalid safe type specified: ${type}`);
    }
  }
}

Answer 2

Firebase存储在提取数据时以类似的方式工作。尽管有不同的检索方法。最重要的因素之一是如何保存数据。您将可以根据其检索它们。

这里：

storageRef.child("users/me/profile.png").getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
    @Override
    public void onSuccess(Uri uri) {
        // Got the download URL for 'users/me/profile.png'
    }
}).addOnFailureListener(new OnFailureListener() {
    @Override
    public void onFailure(@NonNull Exception exception) {
        // Handle any errors
    }
});

//另一种获取下载URL的方式

storageRef.child("users/me/profile.png").getDownloadUrl().getResult();

孩子的位置非常重要，这应该是您登录的一部分。

例如在新闻结构中，它可以是：

storageRef.child("newsID/articleimage/image.jpg")

newsID-每篇文章的唯一ID。重要！当您创建文章以获取单独的图像时。而且，可以按照以下说明通过各种方式下载“ image.jpg”：文档。

如何在角度ngfor中显示Firebase存储中的文件

2 个答案: