VUE找不到Vuetify V-IMG元素的动态源

我需要用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 warn]：渲染中的错误："错误：找不到模块'../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 notify es6.promise.js：92 冲洗_microtask.js：18 vue.runtime.esm.js：1888

经过长时间的研究并尝试了我自己的问题的答案。

这里的问题在于方法"需要"。它需要知道在编译期间，当我使用动态路径时，图像所在的文件夹。看这里。因此，将包括文件名(文件名(的路径提供动态，无法启用"需要"方法仅识别文件夹。那是我的解释。

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

<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，并且也可以正常工作。

您也可以这样做：

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

这在Vuetify 1.5

中起作用

尝试使用计算属性，类似：

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

相关内容

最新更新

热门标签：