Vue.js v-bind：<img>元素的src沒有顯示圖像

我有一個植物陣列。每個植物都是一個包含其名稱，特徵和圖像路徑的對象。我想在v-for列表中顯示它們。Vue.js v-bind：<img>元素的src沒有顯示圖像

我已經試過：

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

這：

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

既沒有表現出圖像。

但是當我把圖片的路徑，例如：

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

它顯示。

這不是v-對於錯誤。我的代碼有什麼問題？

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" }, 
    ] 
}};

來源

2017-06-07 Tarcísio Melo

你能告訴你的工廠對象 –

我試圖使用小寫字母了。 –

我認爲這可能與如何在webpack中加載dynanamic圖像有關。看看這裏的答案（https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working），你的問題將得到解決 –

嗨試試這一個，也許它是一個問題的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/

來源

2017-06-07 09:05:05 Kzy

我只是改變了路徑到靜態文件夾，這個固定問題。謝謝。 –

Vue.js v-bind：<img>元素的src沒有顯示圖像

回答

相關問題