vue.js vuefire firebase storage image url

Question

私はVueとFirebaseを初めて使いました。 VueJSでは、Firebaseの記憶域（FriendlyChat.prototype.setImageUrl）に保存されている画像の正しい画像URLを返すFirebase friendlychat関数を複製しようとしています。私はこの機能をvueコンポーネントで定義しています。

let messagesRef = fbdb.ref('messages') 
export default{ 
    firebase: { 
    messages: messagesRef.limitToLast(20) 
    },  
    methods: { 
    getImageUrl: function (imageUri) { 
    // If the image is a Firebase Storage URI we fetch the URL. 
    if (imageUri) { 
    this.showImage = true 
    if (imageUri.startsWith('gs://')) { 
     // var loadingimg = LOADING_IMAGE_URL // Display a loading image first. 
     fbstorage.refFromURL(imageUri).getMetadata().then(function (metadata) { 
     let img = metadata.downloadURLs[0] 
     console.log('firbase image url', img) 
     return img 
     }) 
    } 
    else { 
     return imageUri 
    } 
    } 
    else { 
    this.showImage = false 
    return '' 
    } 
} <...> 

HTMLテンプレートでは、単に関数を呼び出そうとすると機能しません。

<div v-for ="message in messages"> 
    <img :src="getImageUrl(message.imageUrl)"> 
... 
</div> 

（それは約束ですので？）私は、この関数の結果を得るためにVueの中に正しい方法を把握することはできませんすべてのヘルプは歓迎です！

Answer 1

vue-async-computedの助けを借りて、データプロパティを設定した計算された変数を使用して、Firebase Storage URIのURLを返すメソッドが見つかりました。それが動作している間、それは明らかに状況を処理するための適切な方法ではありませんし、より良い方法で入力していただければ幸いです。

firebase関数は約束であるため、計算された変数の結果を単純に要求することはできません。私はまだこれを適切に処理する方法を知りませんが、vue-async-computedは少し単純化しているようです。

私が提出した元のコードとのバリエーションでは、単一のメッセージ用のコンポーネントを作成しました（少し単純化しています）。このコンポーネントは、VueJSで十分に簡単な小道具の値からデータを取得します。この場合、message.imageURLにはFirebaseストレージURIが含まれており、実際のURLに変換する方法が必要です。

HTMLテンプレート - ：srcは、データ値imageURLを参照します。

<img :src="imageURL"> 

コンポーネントのJavaScriptコード：

、計算機能、fbImageは、URLを取得するFirebase約束を呼び出し、imageURLに呼ばれるデータ値を設定します。しかし、これは、（プロミスが解決された後に結果を返す）約束を扱うように見えるasyncComputed関数なしでは動作しません。

私はまず、HTMLバインディングで計算された関数を参照する必要があると考えましたが、これはうまくいきません。

props: ['message'], 
data: function() { 
    return { 
    imgURL: '' // gets populated when fbImage is computed 
    } 
    }, 
computed: { 
fbImage: function() { 
    // If the image is a Firebase Storage URI we fetch the URL. 
    var _this = this 
    var _imageURL = this.message.imageUrl 
    if (_imageURL) { 
    if (_imageURL.startsWith('gs://')) { 
     fbstorage.refFromURL(_imageURL).getMetadata().then(function (metadata)  { 
     _this.imgURL = metadata.downloadURLs[0] // imgURL is component data 
     }) 
    } 
    else { 
     return _imageURL 
    } 
    } 
    else { 
    return '' 
    } 
}, 
asyncComputed: { 
img() { 
    return new Promise(resolve => 
    this.fbImage 
) 
}