Excuse me for being new to Vue and struggling a bit. I'm attempting to display an image using a src that comes from an object property, which is retrieved from an array returned by data()
I am not receiving any errors, but the icon is not appearing. Other images from the same directory are working fine, so I assume my syntax is incorrect. I have confirmed that the img src is correct, and after searching online, I couldn't find a different method to try. Hopefully, someone can provide some insight :)
I noticed that I encounter an error when I use
v-bind:src="getImage(imagePath)"
If I do this, it seems like Vue tries to locate the file but returns an error in the console saying it cannot find the item. I used the file elsewhere outside the for loop, and it worked fine :/
The img src also displays correctly in the source code on render https://i.sstatic.net/feVW1.png
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"
}
]
}
}