标签：src img point require title images 动态 png

项目开发中遇到这个问题，记录总结一下。
问题：利用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')
                }
            ]
        }
    },```

标签：src,img,point,require,title,images,动态,png
来源： https://blog.csdn.net/qq_30136729/article/details/120488520

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。