typescript - 我如何從 Firebase Storage 獲取圖片並在 Angular 2 的 ngFor 中顯示它們

我正在嘗試在 *ngFor 中顯示我從 Firebase Storage 下載的圖片。

我成功從儲存中取得了影像資料，但我不知道如何在 ngFor 語句中設置影像資料。

讓我在這裡給你看我的程式碼。

<ons-list-item class="list__item list__item--chevron" tappable *ngFor="let request of requests | async" (click)="pushToDetail(request)">
    <ons-row>
      <ons-col width="20%"><img [src]="userProfileImg"></ons-col>
      <ons-col style="padding-left:20px;">
        <p class="name"><i class="fa fa-venus fa-fw" aria hidden="true"></i>{{request.nickName}}</p>
      </ons-col>
    </ons-row>
</ons-list-item>

這是下載圖片的程式碼。我是在訂閱 FirebaseListObservable 資料時，用 foreach 寫的這個。

getProfileImageUrl(userId: string) {
    const userStorageRef = firebase.storage().ref().child('images/users/' + userId + "_users.jpg");
    userStorageRef.getDownloadURL().then(url => {
      this.userProfileImg = url
    });
  }

那麼我希望你教我如何從 Firebase Storage 讀取影像。有什麼建議嗎？

答案＃1

保存圖片名稱，以及到資料庫的短路徑。

使用以下代碼上傳 base64 圖像；

uploadImage(name, data) {
    let promise = new Promise((res,rej) => {
        let fileName = name + ".jpg";
        let uploadTask = firebase.storage().ref(`/posts/${fileName}`).put(data);
        uploadTask.on('state_changed', function(snapshot) {
        }, function(error) {
            rej(error);
        }, function() {
        var downloadURL = uploadTask.snapshot.downloadURL;
            res(downloadURL);
        });
    });
    return promise;
 }

只需兩行程式碼就可以在有權限的情況下安全地獲取實際的網址。

this.storageRef = firebase.storage().ref().child('images/image.png');
this.storageRef.getDownloadURL().then(url => console.log(url) );

如果你需要更多選項，例如傳遞字串、URI 等，你可以查看我關於使用 angularfire2 上傳及從 firebase storage 獲取資料的部落格文章。

我希望它能幫助到某人。

答案＃2

假設每個陣列元素的圖像都是唯一的：

<ons-list-item class="list__item list__item--chevron" tappable *ngFor="let request of requests | async" (click)="pushToDetail(request)">
    <ons-row>
      <ons-col width="20%"><img [src]="userProfileImg"></ons-col>
      <ons-col style="padding-left:20px;">
        <p class="name"><i class="fa fa-venus fa-fw" aria hidden="true"></i>{{request.nickName}}</p>
      </ons-col>
    </ons-row>
</ons-list-item>

你應該將 [src]="userProfileImg" 改為一個函數，該函數返回陣列項中每個圖片的 URL，例如 [src]="getUserProfileImage(request)"。

在你的組件中：

...
getUserProfileImage(request: TypeOfRequestHere) {
    return 'images/users/' + request.userId + '_users.jpg';
}
...

更新 或者，也可以在範本中完成此操作：

[src]="'images/users/' + request.userId + '_users.jpg'"