vue单页应用，使用v-for生成的图片地址不生效

在单页应用中，我们在 assets目录下面放的图片资源地址，在页面使用v-for循环遍历的时候，src不生效

// 循环遍历不生效
<div  v-for='(item, index) in teachList'  :key='index'>     <img :src="item.imgSrc" :alt="item.alt" />
</div>
//这种生效
 <img src="@/assets/images/1,jpg" />
<script>export default {
    data () {
        return {
            teachList: [
                {imgSrc: '@/assets/images/1.jpg',alt: '第一张图'},
                {imgSrc: '@/assets/images/2.jpg',alt: '第二张图'}
            ]
        }
   }
</script>    

这个图片，如果我们写在template中，@符号是vue-cli 配置的别名，表示src目录

上面的v-for循环，并没有直接去解析出我们的实际的目录，找到图片的地址，而是当做字符串将@解析出来了

图片路径写在data中就解析不了，解决办法，资源使用 require(资源地址)

 imgSrc: require('@/assets/images/1.jpg'),

这样就可以了