vue img 不会从 data() 渲染 object.value

Question

很抱歉，如果我刚接触 vue 并且自找麻烦。我正在尝试使用来自对象属性的 src 渲染 img，该对象属性来自我从 data() 返回的数组

我没有收到任何错误但我没有看到任何图标出现，我正在使用同一目录中的其他图像没有问题所以我假设我的语法是错误的我已经验证了 img src 是正确的我没有看到与谷歌搜索不同的方法，所以我希望有人对我有一些见解:)

我发现如果我使用，我确实会收到错误

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

如果我这样做看起来像 vue 查找文件但在控制台中返回一个错误，它无法找到该项目，我在 for 循环之外的其他地方使用了该文件并且它工作正常：/

我的控制台还在源代码中正确显示了 img src 渲染

模板

 <!-- 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>

这里是我的数据样本供参考

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

Answer 1

如果您可以尝试设置如下数据：

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

然后创建方法：

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

然后在模板调用方法中：

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