Javascript 从vuejs中返回的数据检索图像

我试图在我的代码中显示som图像，这些图像已以以下方式存储在我的数据中：

{{ships}}
{{links.type==ships？links.src:'}

“我的数据”存储此对象数组的位置：

data() {
    return {

      destroyedShipBox:['PatrolBoat','Destroyer'],
      destroyedShipBoximages:[
        {type:'PatrolBoat',src:require('../assets/patrolBoatHorizontalView.png')},
        {type:'Submarine',src:require('../assets/submarineHorizontalView.png')},
        {type:'BattleShip',src:require('../assets/battleshipHorizontalView.png')},
        {type:'Carrier',src:require('../assets/carrierHorizontalView.png')},
        {type:'Destroyer',src:require('../assets/destroyerHorizontalView.png')},

      ],
}

DestroyedShippox会自动填充一些已经获取的JSON，然后DestroyedShippoxiImage只是游戏中所有类型船只的集合，以及根据其类型的船只图像。 因此，我在html模板中的逻辑想要设置一个图像，使其与我在DestroyedShippox数组中已经获得的舰船类型相协调，但最终的结果是这样的

PatrolBoat    /img/patrolBoatHorizontalView.63b25d8d.png----->should be an image instead of this
Destroyer     /img/destroyerHorizontalView.396ed25f.png ----->should be an image instead of this

只是图像没有出现。。。 关于如何解决这个问题的任何建议。。。

---

提前感谢

您应该将

links.src

分配给

img

标记的

src

属性，如下所示：

<div>
  <tr v-for='(ships,index) in destroyedShipBox' :key='index'>
    <td>{{ships}}</td>
    <td>
      <div v-for='(links,index1) in destroyedShipBoximages' :key='index1'>
        <img :src="links.src" v-if="links.type==ships"/>
      </div>
    </td>
  </tr>
</div>

{{ships}}

如果船舶与其具有以下计算属性的图像之间存在1:1关系，您还可以简化模板逻辑，并且只有一个if条件：

computed: {
    shipsWithImages() {
    return this.destroyedShipBoximages.filter((value) => {
    if(this.destroyedShipBox.includes(value.type)) {
        return value;
    }
  })
},

}

干杯

---

伊瓦奇

听到这个消息很高兴：-）