firebaseに保存したURLを参照して、直接画像を読み出したい。Nuxt.js

Question

実現したいこと

1. 画像をアップロードすると同時に、storageの参照パスをfirebaseに保存する。

2. 画像を:srcで参照するときに、いちいちgetDownloadURL()を使わないようにしたい　◀️本命

　下のように

（<img :src='userItem.myImage' v-for="userItem in userList" :key="userId"/）

firebaseに保存したURLを直接参照して、画像を読み出したい。

不可能な点

いざ保存して、firebaseのコンソールを見てみると、myImageがnullのままになっております

<script>
export default{
 data(){
  return{
     targetImg:sample.png//--------------もう入っているという前提。
     imagePath:null
  }
 }
 methods:{
    post(){
        const timeValue = new Date().getTime().toString(16);

        //---------------------------------------------------画像アップロード
            storage.ref().child(`images/${timeValue}`)    
            .put(targetImg).then((snapshot) => {

               snapshot.ref.getDownloadURL()
                 .then(url => {
                     this.imagePath = url;//該当箇所
                })
           }).catch(error => {});
         

         //----------------------------------------------firebaseに保存      
          db.collection('myData').add({
                 userName:"ff7575"
                 hobby:"fly"
                 myImage : this.imagePath
          })
   }
 }
}

</script>

上記のコードで、エラーは一切出ておりません。

nullを解消したいのですが、どなたかお力添えいただけませんでしょうか。

公式リファレンスを参照しましたが、解読力が無く、わかりません。

わかりやすく、説明していただけるだけでも大変助かります。よろしくお願いいたします。

Answer 1

Firebaseのstorageに保存する処理とURLの取得は非同期処理です。ですので、この場合実行順序が次のようになっていると思います。

1. Storageに保存しにいく処理
2. Firestoreへの保存処理（この時点でthis.imagePathはnull）
3. StorageのgetDownloadURLを叩く処理

ですので以下のようにgetDownloadURL()の箇所でFirestoreへの保存処理を書いたら動くと思います。

               snapshot.ref.getDownloadURL()
                 .then(url => {
                    //ここにFIrestoreの保存処理を書く
                 )}

---

これは補足ですが別のアプローチとして、Cloud FunctionsでStorageへの保存をトリガーとしてFirestoreに書き込む処理を書く方法もあります。

Comments

[ff7575]

ご回答ありがとうございます。
おっしゃる通りに書き直したら、正しく保存されました。
大変助かりました。
ありがとうございます。