vue找不到vuetify v-img元素的動態源

Question

我需要使用 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'” 在 ---> at 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

經過長時間的研究和嘗試，我找到了自己問題的答案。

這里的問題在於“require”方法。 在編譯期間，當我使用動態路徑時，它需要知道圖像所在的文件夾。 見這里。 因此，動態提供包含文件名的路徑不會啟用“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 2

嘗試使用計算屬性，例如：

<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 3

你也可以這樣做：

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

這適用於 Vuetify 1.5

vue找不到vuetify v-img元素的動態源

問題描述

3 個解決方案

解決方案1
14 已采納 2019-06-28 23:41:18

解決方案2
0 2019-06-28 12:40:37

解決方案3
0 2020-01-28 11:44:56

vue找不到vuetify v-img元素的動態源

問題描述

3 個解決方案

解決方案1 14 已采納 2019-06-28 23:41:18

解決方案2 0 2019-06-28 12:40:37

解決方案3 0 2020-01-28 11:44:56

解決方案1
14 已采納 2019-06-28 23:41:18

解決方案2
0 2019-06-28 12:40:37

解決方案3
0 2020-01-28 11:44:56