Изображение хранилища Vue + Firebase не отображается - PullRequest
Новая
       10

Изображение хранилища Vue + Firebase не отображается

0 голосов
/ 21 мая 2018

Я новичок в Vue и Firebase.Я успешно загружаю изображение в хранилище Firebase.Но не удалось отобразить изображение.Здесь я прилагаю свой код.Если вы можете дать мне любое другое решение для отображения изображений.Это будет здорово.

Шаблон 

<tr v-for="service in services" v-bind:key="service['.key']">
   <img :src="getImgUrl(service.fileName)" width="50px">
   <td>{{service.service}}</td>
   <td>${{service.price}}</td> 
</tr>

Сценарий 

firebase: {
  services: serviceRef
},
methods:{
  getImgUrl(img){
    var imgUrl = firebase.storage().ref('service_images/'+ img).getDownloadURL();
    return imgUrl;
  }
}

1 Ответ

0 голосов
/ 21 мая 2018

Поскольку getDownloadURL() возвращает обещание, я бы рекомендовал реализовать readyCallback для заполнения data объекта соответствующим URL-адресом изображения для каждой службы . 

data () {
  return {
    serviceImages: {} // start with an empty object
  }
},
firebase: {
  services: { // make this a config object instead
    source: serviceRef,
    readyCallback () {
      this.services.forEach(({fileName}) => {
        firebase.storage()
          .ref(`service_images/${fileName}`)
          .getDownloadURL()
          .then(img => {
            // use Vue.set for reactivity
            this.$set(this.serviceImages, fileName, img)
          })
      })
    }
  }
}

и в вашем шаблоне что-то вроде 

<img :src="serviceImages[service.fileName]"...
...