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

【问题标题】：vuetify doesnt load image in <v-img> although prop shows it has the urlvuetify 不会在 <v-img> 中加载图像，尽管 prop 显示它具有 url
【发布时间】：2019-09-16 01:24:43
【问题描述】：

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

这是为了从 getphot 函数加载照片。 src 有 facebook 的 url 但 vuetify 没有加载任何东西

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

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

【问题讨论】：

标签： vuejs2 vuex vuetify.js

【解决方案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。我认为您的代码有两个问题：

从getPhoto() 中删除() <v-img>
将getPhoto() 添加到computed 属性。

这是Codepen

希望对你有帮助。

【讨论】：

对于 require('getPhoto()')，我收到错误“未找到此依赖项”。我的图片链接也是facebook的。没有相对网址。
stackoverflow.com/questions/37878344/… 除了你的解决方案我试过这个。它也没有工作。对不起
好的，现在我发现来自 facebook 的图像没有出现在 chrome 中，但由于某种原因在 Microsoft Edge 中出现了。无论如何，你帮我想出了 vuetify 问题的解决方案。我将把它打勾作为答案。