Vue.js v-bind:src of an <img> 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(stackoverflow.com/questions/40491506/…), your problem will be solved — Vamsi Krishna
– Vamsi Krishna, Commented Jun 7, 2017 at 9:08

Kzy · Accepted Answer · 2017-06-07 09:05:05Z

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 7, 2017 at 9:05

Kzy

5055 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tarcísio Melo Over a year ago

I just changed the path to static folder and this fixed the problem. Thanks.

Nadia Hassouni · Accepted Answer · 2024-09-11 09:34:51Z

0

I imported my image:

import logo from '@/assets/images/logos/my-logo.png';

My object in operators array:

{
      id: 1,
      name: 'logo',
      logo: logo,
      tpe: 22,
    }

and then use it with v-bind :

            <img :src="operator.logo" height="150" alt="operator logo" />

answered Sep 11, 2024 at 9:34

Nadia Hassouni

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related