Question

我是Vue和Firebase的新手。我已成功将图片上传到Firebase存储。但未能显示图像。在这里，我附上我的代码。如果你能给我任何其他显示图像的解决方案。那也很棒。

模板

ViewController

脚本

<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>

Answer 1

由于getDownloadURL()会返回一个承诺，我建议您实施readyCallback以使用每个服务的相应图片网址填充data对象

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]"...

Vue + Firebase存储图像不显示

1 个答案: