• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

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

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 enter image description here

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

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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"/>
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error