vue.js vuefire firebase存储映像url

我是Vue和Firebase的新手。在VueJS中，我尝试复制Firebase friendlychat函数，该函数为存储在Firebase存储中的图像（friendlychat.prototype.setImageUrl）返回正确的图像URL。我在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 ''
  }
} <...>

let messagesRef=fbdb.ref（'messages'））
导出默认值{
火基：{
消息：messagesRef.limitToLast（20）
},    
方法：{
getImageUrl:函数（imageUri）{
//如果图像是Firebase存储URI，则获取URL。
if（imageUri）{
this.showImage=true
if（imageUri.startsWith（'gs://'））{
//var loadingimg=LOADING\u IMAGE\u URL//首先显示正在加载的图像。
fbstorage.refFromURL（imageUri）.getMetadata（）.then（函数（元数据）{
让img=metadata.downloadURL[0]
log（'firbase image url'，img）
返回img
})
}
否则{
返回imageUri
}
}
否则{
this.showImage=false
返回“”
}
} 

在HTML模板中，如果我只是尝试调用函数，它就不起作用

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

...

---

我无法在Vue中找到获得此函数结果的正确方法（因为这是一个承诺？）非常感谢您的帮助！

我在Vue中找到了一种方法，可以在Vue async computed的帮助下，使用设置数据属性的计算变量返回Firebase存储URI的URL。虽然它可以工作，但显然不是处理这种情况的正确方法，我们希望以更好的方式输入

因为firebase函数是一个承诺，所以您不能简单地请求计算变量的结果。我还不知道如何正确处理这个问题，尽管vue async computed似乎将其简化了一点

与我提交的原始代码不同，我为一条消息创建了一个组件（这简化了一点）。该组件从props值获取数据-在VueJS中非常简单。在这种情况下，message.imageURL包含Firebase存储URI，我们需要一种将其转换为实际URL的方法

HTML模板-：src引用数据值imageURL

<img :src="imageURL">

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