CODEWITHSUNDEEP
firebasevue.jsfirebase-storagevuefire
Shakil Zaman
Shakil Zaman

Reputation: 317

Vue + Firebase storage image doesn't show

I'm new in Vue and Firebase. I upload image to Firebase storage successfully. But failed to display the image. Here I attache my code. If you can give me any other solution for display images. That will be great also.

Template

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

Script

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

Upvotes: 2

Views: 1877

Answers (1)

Phil
Phil

Reputation: 164766

Because getDownloadURL() returns a promise, I'd recommend implementing the readyCallback to populate a data object with the corresponding image URL for each service.

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

and in your template, something like

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

Upvotes: 1

Related Questions