vue img will not render object.value from data()

Question

sorry if I'm just new to vue and bugging myself up. I'm trying to render an img with a src that comes from an object property which comes from an array I return from data()

I'm not getting any errors but I'm not seeing any icon appear, I am using other images from the same directory with no problems so I'm assuming my syntax is just wrong I have validated the img src is correct I don't see a different way to do this from googling around so I'm hoping someone has some insight for me :)

I've found that I do get an error if I use

v-bind:src="getImage(imagePath)"

If I do this is looks like vue looks for the file but returns an error in the console that it cannot find the item, I used the file elsewhere outside the for loop and it worked fine :/

my console also shows the img src correctly in the source code on render

template

 <!-- active agencies --> <b-tab title="Active" active><b-card-text> <ul class="pendingAgencyList"> <li v-for="agent in pendingAgency" :key="agent.Status"> <div v-if="agent.Status == 'active'" class="pendingAgencyItem"> <img :src="agent.Icon" :key="agent.Status" height="30px" width="30px"/> //ADDING IMAGE HERE <small>Name</small> <p>{{ agent.Name }}</p> </div> <div v-if="agent.Status == 'active'" class="pendingAgencyItem"> <small>Contact</small> <p>{{agent.Contact}}</p> </div> <p v-if="agent.Status == 'active'" >{{agent.Status}}</p> </li> </ul> </b-card-text></b-tab>

for reference here is a sample of my data

data() { return { pendingAgency:[ { Icon: '../assets/agency_logo-2.png', Name: "Moony Fox", Contact: "345-235-7685", Status: "pending" }, { Icon: '../assets/agency_logo-5.png', Name: "Bofy Fox", Contact: "345-235-7685", Status: "Rejected" }, { Icon: '../assets/agency_logo-3.png', Name: "Felony Mo", Contact: "345-235-7685", Status: "red" } ] } }

Nikola Pavicevic · Accepted Answer · 2021-09-12 19:43:40Z

1

If you can try to set data like:

{ Icon: 'agency_logo-3', ... }

then create method:

methods: { getImage(img) { return require('../assets/' + img+ '.png'; } }

then in template call method:

<img :src="getImage(agent.Icon)" :key="agent.Status" height="30px" width="30px"/>

edited Sep 12, 2021 at 19:43

answered Sep 12, 2021 at 17:09

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

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

9 Comments

luther wardle Over a year ago

I gave this a shot, doesn't seem to return anything

luther wardle Over a year ago

there are no errors which makes me thing the source is just wrong somehow? but the path works fine when I manually render an element outside of the v-for loop

luther wardle Over a year ago

I have also tried using v-bind but I get the same result <img v-bind:src="agent.Icon" :key="agent.Status" height="40px" width="40px"/>

Nikola Pavicevic Over a year ago

v-bind:src is the same as :src , did you try to set path in data like @/assets/agency_logo-5.png?

Nikola Pavicevic Over a year ago

Sorry mate,like i told you it works fine at my copy of your component, with settings like in my answer .(

|

Collectives™ on Stack Overflow

vue img will not render object.value from data()

1 Answer 1

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Related