Как отобразить файлы из хранилища Firebase в угловом режиме

Question

Как отобразить файл хранилища Firebase, учитывая путь к файлу в шаблоне.допустим, у меня есть пути к файлам в массиве.Можно ли сделать что-то вроде этого: функция класса компонента

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

затем в шаблоне в ngFor ...

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

Я пробовал это, но моя страница застыла ...

Answer 1

Firebase Storage работает аналогичным образом при извлечении данных. Хотя есть разные способы получения. Одним из наиболее важных факторов является то, как вы сохраняете свои данные. По которым вы сможете их восстановить.

Здесь:

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 - уникальный идентификатор для каждой статьи. ВАЖНЫЙ! когда вы создаете свою статью для того, чтобы получить отдельные изображения. и что, "image.jpg" может быть загружен различными способами, как описано здесь: Документация.

Answer 2

Функция downloadURL возвращает Observable.Так что вы не сможете сделать это как таковое.

Но вы можете создать два массива.Одна из этих наблюдаемых и другая для фактических URL-адресов загрузки.Затем вы можете применить оператор forkJoin к массиву downloadURLObservables для получения фактических 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>

Возможно, вам придется очистить URL-адрес src для тега изображения, если вы получите ошибку DOM Sanitization.

Чтобы исправить это, выможет создать Angular Pipe, который делает именно это.

Вот общая реализация этой трубы любезно предоставлено этой средней статьей :

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}`);
    }
  }
}