firebase - Firebase 存储和 angularfire2

Question

如何使用 Angular Fire 2 从 Fire 基础存储中获取图像。非常感谢！

constructor(public af: AngularFire) {
this.items = af.database.list('/message');
this.picture = af.database.list('/profile');
}

Answer 1

目前还没有与 AngularFire2 和 Firebase 存储的正式集成。但是，使用常规 SDK 非常容易。

@Component({

})
class MyComponent {
  image: string;
  constructor() {
    const storageRef = firebase.storage().ref().child('path/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}

然后在你的模板中

<img [src]="image" />

Answer 2

由于您使用的是 AngularFire2，因此最好在 AngularFire2 模块中访问 firebaseApp（firebase 实例）。这是原始解决方案。

import { Component, Inject } from '@angular/core';
import { FirebaseApp } from 'angularfire2';

@Component({
  template: '<p>testing</p>'
})
export class AnyComponent {

  constructor(@Inject(FirebaseApp) firebaseApp: any) {
    const storageRef = firebaseApp.storage().ref().child('images/image.png');
    storageRef.getDownloadURL().then(url => this.image = url);
  }
}