當我使用v-for加載圖片資源後，發現靜態資源顯示不成功

<template lang="html">
  <Panel title="有車有錢" :class="$style.panel">
    <section :class="$style.ycyqImg">
      <div :class="$style.imgItem" v-for="item in imgItems" :key="item.img">
          <router-link :to="{ name: item.href}">
              <img :src="item.img">
          </router-link>
      </div>
    </section>
  </Panel>
</template>

<script>
import Panel from 
 
"../core/panel.vue"
export default {
  components:{
    Panel,
  },
  data(){
    return{
      imgItems:
      [{
        href: "borrow",
        img: require("../../assets/whiteCard.png")},
        {href: "borrow",
        img: "../../assets/whiteCircle.png"
        }]
      // [{
      //   href: "borrow",
 

      //   img: "../../assets/whiteCard.png"},
      //   {href: "borrow",
      //   img: "../../assets/whiteCircle.png"
      //   }],
    }
  }
}
</script>

webpack 把img 當做一種資源，所以使用時要先引進，所以在路徑前加上require即可

使用v-for 循環生成圖片時，靜態資源圖片加載失敗