Question

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

如何通过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

Answer 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将获得此新值;

Answer 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，并且效果也很好。

Answer 3

您也可以这样做：

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

这在Vuetify 1.5中有效

Vue找不到vuetify v-img元素的动态来源

3 个答案: