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

Question

抱歉，如果我是 vue 的新手并且让自己烦恼。我正在尝试使用来自对象属性的 src 渲染 img，而对象属性来自数组 I return from data()

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

我发现如果我使用

确实会出错

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

如果我这样做看起来像 vue 寻找文件，但 return 控制台中出现错误，它找不到该项目，我在 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"/>

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

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

javascript

rendering

image

vue.js

vuejs2