vuetify不会在<v-img>中加载图像，尽管prop显示它具有url

Question

<v-img :src="getPhoto()"  height="200px" width="200px"></v-img>

这是用于从getphot功能加载照片的。 src具有Facebook的网址，但vuetify不会加载任何

computed: {
  user () {
    return this.$store.getters.user
  }
},
methods: {
  getPhoto () {
    return this.$store.getters.user.photoUrl
  }
}

我没有收到任何错误。当我使用链接时，我可以访问图像。因为我已经从设备登录。 注意：所有这些我都使用Firebase

Answer 1

尝试

<v-img :src="require('getPhoto()')"  height="200px" width="200px"></v-img>

代替

<v-img :src="getPhoto()"  height="200px" width="200px"></v-img>

  

Vue加载程序会自动为您将相对路径转换为require函数。不幸的是，在定制组件方面并非如此。您可以使用require来解决此问题。如果您将Vuetify用作Vue-CLI 3插件，则可以通过修改vue-loader的选项来编辑项目的vue.config.js文件。

// Incorrect
<v-img src="../path/to/img" />

// Correct
<v-img :src="require('../path/to/img')" />

来源：Vuetify

更新：：当不使用相对路径时，我尝试在使用函数获取图像源的URL时创建示例。我认为您的代码有两个问题：

1. 从()中的getPhoto()中删除<v-img>
2. 将getPhoto()添加到计算属性。

这里是Codepen

希望对您有帮助。