Img не загружается из: src

Попробуйте дождаться получения uuid:

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

Как вы можете видеть в этом примере, не имеет значения, сколько времени требуется для загрузки URL: Игровая площадка Vue SFC

В скрипте под тегами шаблона вы должны обязательно включить изображение и, конечно же, вместо того, чтобы указывать мой путь, укажите путь к вашему изображению!

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

Затем в вашем и куда вы хотите поместить свое изображение, вам нужно поместить его в этом формате

 <img :src = "files.my_pic">

Дайте мне знать, поможет ли это или вы хотите, чтобы я расширился.

Когда Vue Loader компилирует блоки <template> в SFC, он также преобразует любые встречающиеся URL-адреса ресурсов в запросы модуля webpack.

Например, следующий фрагмент шаблона:

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

будет скомпилирован в:

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

По умолчанию следующие комбинации тегов / атрибутов преобразуются, и их можно настроить с помощью опции transformAssetUrls.

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

Шаг 1: Создать 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
      })
  }
}

Шаг 2: Внутри main.js импорт vue.config

import '../vue.config'

Шаг 3: Создайте свой шаблон html

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