Vue.js v-bind:src of an element doesn't showing the image

Question

I have an array of plants. Each plant is an object that includes its name, characteristics, and its image path. I want to show them in a v-for list.

What I've tried:

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

and this:

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

Neither showed the image.

But when I put the image path, like this:

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

It shows.

It's not v-for error too. What's wrong with my code?

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

I think This has to do with how dynanamic images are loaded in webpack maybe. Have a look at the answer here(https://stackoverflow.com/questions/40491506/vue-js-dynamic-images-not-working), your problem will be solved — Vamsi Krishna, Jun 07 '17 at 09:08

score 3 · Answer 1 · answered Jun 07 '17 at 09:05

3

Hi Try this one maybe its a webpack issue

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

And add to methods.

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

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

answered Jun 07 '17 at 09:05

Kzy

492
4
11

I just changed the path to static folder and this fixed the problem. Thanks. – Tarcísio Melo Jun 07 '17 at 10:14

Vue.js v-bind:src of an element doesn't showing the image

1 Answers1