Question

我是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 ''
  }
} <...>

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

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

我无法在Vue中找出正确的方法来获得此功能的结果（因为它是一个承诺？）任何帮助表示赞赏！

Answer 1

我在Vue中找到了一个方法，使用在vue-async-computed的帮助下设置数据属性的计算变量来返回Firebase存储URI的URL。虽然它有效，但显然不是处理这种情况的正确方法，并且对更好的方式的投入表示赞赏。

因为firebase函数是一个promise，所以你不能简单地请求计算变量的结果。我还不知道如何正确处理这个问题，尽管vue-async-computed似乎可以简化它。

在我提交的原始代码的变体中，我为单个消息创建了一个组件（这简化了一些事情）。该组件从道具值获取数据 - 在VueJS中足够简单。在这种情况下，message.imageURL包含Firebase存储URI，我们需要一种方法将其转换为实际的URL。

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

<img :src="imageURL">

组件JavaScript代码：

计算函数fbImage调用Firebase承诺获取URL，然后设置名为imageURL的数据值。但是，如果没有asyncComputed函数，它似乎无法处理promise（在解析promise后返回结果），但这不起作用。

我一开始认为我需要在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
 )
}

vue.js vuefire firebase存储图片网址

1 个答案: