2

我是 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 中找出正确的方法来获取此函数的结果（因为它是一个承诺？）任何帮助表示赞赏！

4

1 回答 1

1

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

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

在我提交的原始代码的一个变体中，我为单个消息创建了一个组件（这稍微简化了一些事情）。该组件从一个 props 值中获取数据——在 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
 )
}
于 2017-01-13T00:10:55.003 回答