Firebase 存储 | Angular 2 - 上传后显示图像的正确方法答案

【问题标题】：Firebase Storage | Angular 2 - Proper way to display image after uploadFirebase 存储 | Angular 2 - 上传后显示图像的正确方法
【发布时间】：2018-04-05 02:41:40
【问题描述】：

创建事件时，我还将图像上传到 Firebase 存储。

然后我创建一个数组this.eventz 来在主页上显示事件。对于每个事件，我也想检索图像，但出现 Firebse 错误：

FirebaseStorageError {code_: "storage/object-not-found", message_: "Firebase Storage: Object 'events/-KxCuUuss1I2uFolk99m/-KxCuUuss1I2uFolk99m_main.png' does not exist.", serverResponse_: "{↵ "error": {↵ "code": 404,↵ "message": "Not Found. Could not get object"↵ }↵}", name_: "FirebaseError"}

我知道当我想将它包含在数组中时，该图像尚未上传，但我不知道如何解决我的问题。代码工作正常。它显示所有事件，为每个事件添加图像......这只是创建新事件时的错误。

getEventImage(event) {

if (event) {
            const mainPhotoRef = firebase.storage().ref('events');
            console.log(mainPhotoRef);
            mainPhotoRef.child(`/${event.key}/${event.key}_main.png`).getDownloadURL()
                .then(url => this.makeEvents(url, event))
        }
    }

makeEvents(url, event) {
    console.log(url);
    if (url) {
        try {
            event.img = url;
            let index = _.findIndex(this.eventz, ['key', event.key]);

            if (index >= 0) {
                this.eventz.splice(index, 1);
            }

            this.eventz.push(event);
        } catch (err) {
            console.log(err);
        }
    }
}

【问题讨论】：

标签： javascript angular firebase-storage

【解决方案1】：

我通过在创建事件对象时将 url 保存到事件对象来解决我的问题。我想知道我是否正确上传。

private uploadPhoto(itemKey): void {
    this.myPhotosRef.child(itemKey).child(`${itemKey}_main.png`)
      .putString(this.myPhoto, 'base64', { contentType: 'image/png' })
      .then((savedPicture) => this.updateEventImage(savedPicture.downloadURL, itemKey));
  }

  updateEventImage(url, itemKey) {
    console.log(url);
    const newEvent = this.db.object(`events/${itemKey}`)
    newEvent.update({ eventImage: url });
  }

【讨论】：