vue找不到vuetify v-img元素的动态源答案

【问题标题】：Vue cannot find the dynamic source of the vuetify v-img elementvue找不到vuetify v-img元素的动态源
【发布时间】：2019-11-10 08:38:30
【问题描述】：

我需要使用 vuetify 动态加载图像（从我的文件系统而不是 url）。但是，当我在 v-img 元素中绑定路径变量时，vue 找不到它。当我使用“必需”方法将其静态放置时，就可以了。

如何使用 vuetify 选择动态路径？这是文件加载器的问题吗？

我希望在运行时动态选择图像。例如，如果我有“下一个”按钮，我想加载下一个图像。这是 Vue.js 中的代码

<html>   
   <v-img 
      v-bind:src="require(myPath)"
      aspect-ratio="1.5"
      max-height="500"
      contain
   />
</html>

<script>    
    data: () => ({
        mycount: 1,
        myPath: "../myimages/2.png"
    })
</script>

[Vue 警告]：渲染错误：“错误：找不到模块 '../myiamges/2.png'”在 ---> 在 src/App.vue vue.runtime.esm.js:619 中找到错误：“找不到模块 '../imyimages/2.png'” webpackEmptyContext 组件同步：2 渲染 Gamesheet.vue:30 VueJS 21 运行 es6.promise.js:75 通知 es6.promise.js:92 刷新 _microtask.js:18 vue.runtime.esm.js:1888

【问题讨论】：

当我将路径更改为 url 路径并删除 require 方法时，它可以工作。例如：v-bind:src=myPath myPath: "vuejs.org/images/logo.png",

标签： javascript vue.js vuetify.js

【解决方案1】：

尝试使用计算属性，例如：

<html>   
   <v-img 
     v-bind:src="require(imageSrc)"
     aspect-ratio="1.5"
     max-height="500"
     contain
   />
</html>

<script>    
   data: () => ({
      mycount: 1,
      myPath: "../myimages/2.png"
   }),
computed: {
   imageSrc() {
      return this.myPath;
   }
}
</script>

这将使 imageSrc 成为一个动态变量，但是您说单击“下一步”按钮，此单击需要更改“myPath”值然后“imageSrc”将更改，v-img 将获取此新值;

【讨论】：

实现计算属性后问题依然存在。发生了同样的错误。正如错误所说，Vue.js 以某种方式正确解释了动态路径，但它仍然找不到文件。另一方面，静态路径仍在工作。

【解决方案2】：

经过长时间的研究和尝试，我找到了自己问题的答案。

这里的问题在于方法“require”。在编译过程中，当我使用动态路径时，它需要知道图像所在的文件夹。见here。因此，动态提供包含文件名的路径不会启用“require”方法来仅识别文件夹。那是我的解释。

所以我修改了这样的代码，它对我有用：

<html>   
   <v-img 
      v-bind:src="require('../myimages/' + myFilename)"
      aspect-ratio="1.5"
      max-height="500"
      contain
   />
</html>

<script>    
    data: () => ({
        mycount: 1,
        myFilename: "2.png"
    })
</script>

在这种情况下，我可以在运行时更改 myFilename，它也可以正常工作。

【讨论】：

【解决方案3】：

你也可以这样做：

<v-img 
    :src="`${image-variable}`">
</v-img>

这在 Vuetify 1.5 中有效

【讨论】：