时间戳

首页 > 解决方案 > Vue + Firebase 存储图像不显示

firebase - Vue + Firebase 存储图像不显示

问题描述

我是 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;
  }
}

标签： firebasevue.jsfirebase-storagevuefire

解决方案

因为getDownloadURL()返回一个承诺，所以我建议实现为每个servicereadyCallback填充一个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]"...

推荐阅读