img 未从 :src 加载

Question

我正在从 firestore 获取图像位置，并希望使用 v-bind:src 显示图像。您可以在下面找到我的代码：

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

我的方法可以在下面找到：

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

}

我确信 this.profilepic 存储了正确的路径，就好像我要手动输入路径一样，它会显示出来。我怀疑在路径之前加载的页面可以从 Firestore 中检索。我该如何解决这个问题？提前谢谢你。

我已尝试将路径直接硬编码到数据，它工作正常。代码如下：

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

我不太确定为什么它仍然没有显示

Answer 1

尝试等待获取 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 Playground

Answer 2

在模板标签下面的脚本中，你需要确保包含图片，当然，不要放我的路径，而是放你的图片路径！

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

然后在你和你想放图片的地方，你需要把它放在这种格式

 <img :src="files.my_pic">

让我知道这是否有帮助，或者您是否希望我扩展更多内容。

Answer 3

当 Vue Loader 编译 SFC 中的 <template> 块时，它还会将遇到的任何资产 URL 转换为 webpack 模块请求。

例如下面的模板sn-p：

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

第二步：在main.js import 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>