Angular2Fire 访问存储中的图像

Question

我将 firebase 与 angular2 一起使用。我厌倦了直接 url 访问 firebase 存储桶中的图像。它给出了一些安全错误，但在地址栏中输入时可以直接在浏览器中查看相同的图像。

<img src="gs://img url in firebase storage">

出现如下错误

然后我按照linkAngular2Fire Image access尝试了这个方法。但它 returns 我的对象而不是 url 访问。

TS:

recommendedListBind(list){
list.forEach(lists => {
    const storageRef = firebase.storage().ref().child(lists.thumbnail);
    let thumbnail = storageRef.getDownloadURL().then(url => url);

    let Detail = {
      title : lists.title,
      thumbnail : thumbnail,
    }

    this.recommendedList.push(Detail);
  });
};

HTML:

<ul>
  <li *ngFor="let List of recommendedList">
    <div class='cards'>
        <img src={{List.thumbnail}} alt={{List.title}} title={{List.title}} />
  </li>
</ul>

它给出了以下消息：

访问 firebase 存储中的图像的正确方法是什么？

Answer 1

使用 Firebase 存储时 api 要么实施身份验证，要么您可以使用不需要身份验证的下载 url，它基于可以在控制台中撤销的令牌。

您可以在 The Google Firebase Storage Security Documentation and on the AngularFire2 github

上找到有关身份验证的更多信息

Angular2Fire 访问存储中的图像

Angular2Fire Access image in storage

firebase

firebase-storage

angularfire2

angular