当我使用 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 即可
来源: http://www.bubuko.com/infodetail-2978089.html