img not loading from :src

Question

I am getting the image location from firestore and would like to show the image using v-bind:src. You can find my code below:

<b-avatar v-bind:src = "profilepic" class="mr-5" size="8em"></b-avatar>

my methods can be found below:

export default {
    data() {
        return {
            uid: "",
            profilepic: "",
        }
    },
    methods: {
        getprofilepic() {
            fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL().then(imgURL  => {
                this.profilepic = imgURL;
                alert(this.profilepic); // shows the correct path
            })
        },
    }


    created() {
        this.uid = fb.auth().currentUser.uid;
        this.getprofilepic();
    }

}

I am confident that this.profilepic is storing the correct path as if i were to manually type in the path, it will show. I am suspecting that the page loaded before path could be retrieve from firestore. How can i work around this? Thank you in advance.

I have tried hardcoding the path directly to the data and it works fine. The code can be found below:

 data() {
        return {
            uid: "",
            profilepic: "*my firebase storage path*",
        }
    },

With that im not really sure why isnt it still showing

Answer 1

Try waiting for the uuid to get retrieved:

<template>
  <img height="200" v-bind:src = "profilepic" />
</template>

<script>
export default {
  data() {
    return {
      uuid: undefined,
      profilepic: undefined
    }
  },
  methods: {
    getprofilepic() {
      fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL()
        .then(imgURL  => {
        this.profilepic = imgURL;
      })
    },
    getuuid(){
      return new Promise((resolve, reject) => {
        var user = fb.auth().currentUser;
        if(user == null) reject()
        if (user) resolve(user.uid)
      })
    }
  },
  created() {
    this.getuuid()
      .then(uuid => this.uuid = uuid)
      .then(() => {
      this.getprofilepic();
    })
  }
};
</script>

As you can see in this example, it does not matter how long it takes for the URL to load: Vue SFC Playground

Answer 2

In the script below the template tags, you need to make sure to include the image, and of course, instead of putting my path, put your image's path!

<script>
    export default {
        data() {
            return {
                files: {
                    my_pic: require('/src/assets/img/avatars/logo.png')
                }
            };
        },
       }
     };
 </script>

Then in your and where you want to put your image, you need to put it in this format

 <img :src="files.my_pic">

Let me know if this helps or if you want me to expand more.

Answer 3

When Vue Loader compiles the <template> blocks in SFCs, it also converts any encountered asset URLs into webpack module requests.

For example, the following template snippet:

<img src="../image.png">

will be compiled into:

createElement('img', {
 attrs: {
  src: require('../image.png') // this is now a module request
 }
})

By default the following tag/attribute combinations are transformed, and can be configured using the transformAssetUrls option.

{
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

Step 1: Create vue.config.js

 module.exports = {
  productionSourceMap: false,
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options['transformAssetUrls'] = {
          video: ['src', 'poster'],
          source: 'src',
          img: 'src',
          image: 'xlink:href',
          'b-avatar': 'src',
          'b-img': 'src',
          'b-img-lazy': ['src', 'blank-src'],
          'b-card': 'img-src',
          'b-card-img': 'src',
          'b-card-img-lazy': ['src', 'blank-src'],
          'b-carousel-slide': 'img-src',
          'b-embed': 'src'
        }
        return options
      })
  }
}

Step 2: Inside main.js import vue.config

import '../vue.config'

Step 3: Create your html template

<template>
  <b-avatar :src="profilepic" class="mr-5" size="8em"></b-avatar>
</template>
<script>
  import { BAvatar } from 'bootstrap-vue'
  export default {
    name: 'bootstrap-image-avatar',
    components: {
      'b-avatar': BAvatar
    },
    data() {
      return {
        uid: "",
        profilepic: "",
      }
    },
    methods: {
      getprofilepic() {
        fb.storage().ref('users/' + this.uid + '/profile.jpg').getDownloadURL().then(imgURL  => {
          this.profilepic = imgURL;
          alert(this.profilepic); // shows the correct path
        })
      },
    }
    created() {
      this.uid = fb.auth().currentUser.uid;
      this.getprofilepic();
    }
  }
</script>