Firebaseストレージ| Angular 2 - アップロード後に画像を表示するための適切な方法

Question

イベントを作成するとき、Firebase Storageにも画像をアップロードします。

次に、ホームページのイベントを表示するために配列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); 
     } 
    } 
} 

Answer 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 }); 
    }