v-for动态设置img的src

项目开发中遇到这个问题，记录总结一下。
问题：利用v-for动态设置图片,图片路径处写法如下图，发现图片不显示

 <div v-for="(item,index) in classify" :key="index" class="cart">
        <img :src="item.img" alt="">
        <div> 
            <p>{{item.title}}</p>
            <p>{{nums[index]}}</p>
        </div>
     </div>
     
//遍历的数据：	
data () {
        return {
            classify:[
                {
                    title:"项目总数",
                    img:require('@/assets/images/point/1.png')
                },
                {
                    title:"总积分",
                    img:require('@/assets/images/point/2.png')
                },
                {
                    title:"总工作积分",
                    img:require('@/assets/images/point/3.png')
                },
                {
                    title:"总奖励积分",
                    img:require('@/assets/images/point/4.png')
                }
            ]
        }
    },

查了一下，错误在：

• 在遍历的数组中img写的是路径，但是for循环遍历的时候img的src会将该路径解析为字符串，而不是路径，导致路径错误

解决方案：

• 在数组中img赋值时，在路径前边加上require()，之后img的 src就不会将此解析为字符串了

在这里插入代码片data () {
        return {
            classify:[
                {
                    title:"项目总数",
                    img:require('@/assets/images/point/1.png')
                },
                {
                    title:"总积分",
                    img:require('@/assets/images/point/2.png')
                },
                {
                    title:"总工作积分",
                    img:require('@/assets/images/point/3.png')
                },
                {
                    title:"总奖励积分",
                    img:require('@/assets/images/point/4.png')
                }
            ]
        }
    },```