vue.js URL-адрес образа хранилища FireBase

Question

Я новичок в Vue и Firebase. В VueJS я пытаюсь скопировать функцию friendlychat Firebase, которая возвращает правильный URL-адрес изображения для изображения, хранящегося в хранилище Firebase ( FriendlyChat.prototype.setImageUrl). У меня есть эта функция, определенная в компоненте 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 я нашел способ вернуть URL для URI хранилища Firebase, используя вычисляемую переменную, которая устанавливает свойство данных, с помощью vue-async-computed. Хотя это работает, это явно не правильный способ справиться с ситуацией, и мы ценим вклад в лучший способ.

Поскольку функция firebase является обещанием, вы не можете просто запросить результат вычисленной переменной. Я пока не знаю, как с этим справиться, хотя vue-async-computed, кажется, немного упростит его.

В отличие от исходного кода, который я представил, я создал компонент для одного сообщения (что немного упрощает задачу). Компонент получает данные из значения реквизита - достаточно просто в VueJS. В этом случае message.imageURL содержит URI хранилища Firebase, и нам нужен способ преобразовать его в реальный URL.

Шаблон HTML -:src ссылается на значение данных imageURL.

<img :src="imageURL">

Код JavaScript компонента:

Вычисленная функция fbImage вызывает обещание Firebase, чтобы получить URL, а затем устанавливает значение данных с именем 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
 )
}