Vue.js v-bind：<img>要素のsrcは画像を表示しません

Question

私は植物の配列を持っています。各プラントは、その名前、特性、およびイメージパスを含むオブジェクトです。私はそれらをv-forのリストに示したいと思う。

私が試した何

：

<img v-bind:src="plant.img"> 

をし、この：

<img v-bind:src="'./../../assets/plants/' + plant.name + '.jpg'"> 

どちらも画像を示しました。

しかし、ときに私はこのように、画像のパスを置く：

<img src="./../../assets/plants/rose.jpg"> 

それは示しています。

あまりにもv-forエラーではありません。 私のコードで何が問題になっていますか？

data() { 
return { 
    plants: [ 
    { name: 'Rose', sun: 4, water: 6, care: 5, img: "./../../assets/plants/rose.jpg" }, 
    { name: 'Mint', sun: 8, water: 3, care: 4, img: "./../../assets/plants/mint.jpg" }, 
    { name: 'Thyme', sun: 7, water: 4, care: 3, img: "./../../assets/plants/thyme.jpg" }, 
    { name: 'Oregano', sun: 4, water: 6, care: 5, img: "./../../assets/plants/oregano.jpg" }, 
    { name: 'Lavanda', sun: 8, water: 3, care: 4, img: "./../../assets/plants/lavanda.jpg" }, 
    { name: 'Patchouli', sun: 7, water: 4, care: 3, img: "./../../assets/plants/patchouli.jpg" }, 
    ] 
}}; 

Answer 1

こんにちは、多分そのAのWebPACK問題

<img :src="getSrc(plant.name)" v-bind:alt="pic"> 

を、このいずれかを試してみて、メソッドに追加します。

methods: { 
    getSrc(name) { 
     var images = require.context('../../assets/plants/', false, /\.jpg$/); 
     return images('./' + name + ".jpg") 
    } 
} 

https://jsfiddle.net/khenxi/vcf57d0f/