使用v-for 循环生成图片时，静态资源图片加载失败

当我使用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即可

 

转载于:https://www.cnblogs.com/JiaFanFan/p/10483060.html