title: vue.js vuefire firebase storage image url
body: <p>I'm new to Vue and Firebase.  In VueJS, I am trying to replicate the Firebase friendlychat function that returns the proper image URL for an image stored in Firebase storage ( FriendlyChat.prototype.setImageUrl).  I have this function defined in a vue component:</p>
  
  <pre><code>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 ''
    }
  } &lt;...&gt;
  </code></pre>
  
  <p>And in the HTML template, if I simply try to call the function, it doesn't work.  </p>
  
  <pre><code>&lt;div v-for ="message in messages"&gt;
    &lt;img :src="getImageUrl(message.imageUrl)"&gt;
   ...
  &lt;/div&gt;
  </code></pre>
  
  <p>I can't figure out the correct way in Vue to get the results of this function (because it is a promise?) Any help is appreciated! </p>