[Vuejs]-Img not loading from :src

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

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.

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>