質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

参照

参照は、プログラミングにおいて変数や関数といったメモリ空間上での所在を指示するデータのことを指します。その中にはデータ自体は含まれず、他の場所にある情報を間接的に指示するプログラムです。

Q&A

解決済

1回答

3638閲覧

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

ff7575

総合スコア123

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

参照

参照は、プログラミングにおいて変数や関数といったメモリ空間上での所在を指示するデータのことを指します。その中にはデータ自体は含まれず、他の場所にある情報を間接的に指示するプログラムです。

0グッド

1クリップ

投稿2020/06/18 13:16

編集2020/06/18 13:43

実現したいこと

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

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

 下のように

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

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

不可能な点

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

vue

1<script> 2export default{ 3 data(){ 4 return{ 5 targetImg:sample.png//--------------もう入っているという前提。 6 imagePath:null 7 } 8 } 9 methods:{ 10 post(){ 11 const timeValue = new Date().getTime().toString(16); 12 13 //---------------------------------------------------画像アップロード 14 storage.ref().child(`images/${timeValue}`) 15 .put(targetImg).then((snapshot) => { 16 17 snapshot.ref.getDownloadURL() 18 .then(url => { 19 this.imagePath = url;//該当箇所 20 }) 21 }).catch(error => {}); 22 23 24 //----------------------------------------------firebaseに保存 25 db.collection('myData').add({ 26 userName:"ff7575" 27 hobby:"fly" 28 myImage : this.imagePath 29 }) 30 } 31 } 32} 33 34</script> 35

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

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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に書き込む処理を書く方法もあります。

投稿2020/06/18 21:52

mottox2

総合スコア299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ff7575

2020/06/19 00:50

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問