有没有一种简单的方法可以从 Angular 模板中的 firebase-storage 路径获取下载 url

Posted 2023-03-22

【中文标题】有没有一种简单的方法可以从 Angular 模板中的 firebase-storage 路径获取下载 url

【英文标题】：Is there a simple way to get the download url from firesbase-storage paths in Angular templates

【发布时间】：2020-11-24 03:37:41

【问题描述】：

我见过一些例子，人们将实际下载路径保存到 firestore，然后在模板中使用该图像。

但是我不太确定这是保存文件位置的正确方法。原因很简单，在检索下载 url 时它包含令牌，我假设这是为当前用户获取下载 url。

所以我在收到的每个模板上都做了什么，我必须获取 downloadUrl 以及下载 url 的组件代码。有没有办法避免这种情况，直接在模板文件中。所以我不需要操作简单的显示数据，其中包含要存储的图像参考。

【参考方案1】：

您可以为此创建一个简单的管道：

import  Pipe, PipeTransform  from '@angular/core';
import  AngularFireStorage  from '@angular/fire/storage';
import  Observable, from  from 'rxjs';

@Pipe(
   name: 'firestoagePath'
)
export class FirestoagePathPipe implements PipeTransform 
    constructor(private storage: AngularFireStorage)  
    transform(value: string, ...args: unknown[]): Observable<string> 
      if (typeof (value) === 'string') 
          const storageRef = this.storage.ref(value);
          return storageRef.getDownloadURL();
      
      return from(value);
   

使用管道，您可以对 firestore 进行注入，这很好，获取下载 url 并将其与异步管道链接，如下所示：

<img *ngIf="firestoreObject.image.croppedSource | firestoagePath | async as imageSource"
    [src]="imageSource">

在此示例中，firestoreObject 是一个随机对象，其图像具有指向 firestorage 上裁剪图像文件位置的字符串路径。