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

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

CodePudding user response：

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