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

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/

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

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

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" />

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

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related