Vue.js動態圖像不起作用

我有一個情況，在我的Vue.js與webpack網絡應用程序，我需要顯示動態圖像。我想顯示img圖像的文件名存儲在變量中。該變量是一個computed屬性，該屬性返回一個Vuex存儲變量，該變量在beforeMount上異步填充。Vue.js動態圖像不起作用

<div class="col-lg-2" v-for="pic in pics"> 
    <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic"> 
</div>

但是它完美的作品時，我只是做：

<img src="../assets/dog.png" alt="dog">

我的情況與此類似fiddle，但在這裏它與IMG URL工作，但在實際的文件路徑礦，它不工作。

什麼應該是正確的方法來做到這一點？

2016-11-08 Saurabh

我用下面的代碼

getImgUrl(pet) { 
    var images = require.context('../assets/', false, /\.png$/) 
    return images('./' + pet + ".png") 
    }

和HTML得到這個工作：

<div class="col-lg-2" v-for="pic in pics"> 
    <img :src="getImgUrl(pic)" v-bind:alt="pic"> 
</div>

但不知道爲什麼，我先前的做法沒有奏效。

2016-11-08 17:30:26 Saurabh

根據nickmessing：「v-bind內部的表達式在運行時執行，webpack別名在編譯時。」 https://github.com/vuejs/vue-loader/issues/896 – antoine

最好的辦法是隻使用一個簡單的方法給定索引處打造爲圖像正確的字符串：

methods: { 
    getPic(index) { 
    return '../assets/' + this.pics[index] + '.png'; 
    } 
}

然後做你v-for內的以下內容：

<div class="col-lg-2" v-for="(pic, index) in pics"> 
    <img :src="getPic(index)" v-bind:alt="pic"> 
</div>

這裏的該JSFiddle（顯然圖像不顯示，所以我把圖像src旁邊的圖像）：

2016-11-08 16:57:43

謝謝，但我也試過，也沒有爲我工作。 – Saurabh

真的嗎？這裏有一個真實圖像的例子，它似乎很好地工作：https://jsfiddle.net/q2rzssxr/1/ –

不知道爲什麼，我通過我寫在另一個答案的代碼工作。你的例子甚至沒有這個功能的工作，看到這裏：https://jsfiddle.net/9a6Lg2vd/1/ – Saurabh

這是webpack將使用的簡寫形式，因此您不必使用require.context。

HTML：

<div class="col-lg-2" v-for="pic in pics"> 
    <img :src="getImgUrl(pic)" v-bind:alt="pic"> 
</div>

Vue的方法：

getImgUrl(pic) { 
    return require('../assets/'+pic) 
}

而且我發現，前2個段落here解釋爲什麼這個工作？好。

請注意，將您的寵物圖片放入子目錄是一個不錯的主意，而不是將它放在所有其他圖片資源中。像這樣：./assets/pets/

2017-11-24 21:35:54 Grigio

回答