将图像从 FireStore 存储应用到应用程序

Question

所以我能够成功地将图像上传到 FireStore 存储。

现在我正在尝试将存储在 FireStore 中的图像应用到应用程序上的用户配置文件中。

import {ActivatedRoute} from '@angular/router';
import { AngularFireStorage } from 'angularfire2/storage';

export class ProfileComponent implements OnInit {

  routeParams;
  profilePicture: any = "../../assets/default-img.png"

  constructor(
  private afStorage: AngularFireStorage,
  private route: ActivatedRoute,
  ) { }


  ngOnInit() 
  {
    this.routeParams = this.route.params.subscribe(
      params => {
          /*Update Variables here*/
          if (email.__email != "")
          {
            let path = "/" + email.__email + "/profile.png";
            this.profilePicture = this.afStorage.ref(path).getDownloadURL();
          }
      });
  }
}

我要做的就是从 FireStore 存储中检索 img 并将其应用到一个人的个人资料图片。

Answer 1

查看文档here。

'getDownloadURL()' 返回一个 Promise，因此您必须解析该 Promise 才能真正从 URL 获取数据。如果您的 HTML 模板使用的是profilePicture，您可以在ngOnInit() 中将 URL 设置为图像源：

this.afStorage.ref(path).getDownloadURL().then(function(url) {
  var img = document.getElementById('myimg');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});