关于图片路径src的问题小结

在vue项目中关于加载图片路径的问题：首先我们要分析一点，项目中前端图片的来源分为几种渠道，其次是我们前端拿到的是什么。。。前提（vue项目）别的先不谈。

        在vue项目中，我们可以直接在template里写成<img src="./../assets/xxx/xxx.xxx"/>这当然是没有问题的，但是当你的图片路径是后台返给你的一串字符串的时候，<img :src="xxx"/>就必须要直接从data里接受一个变量来加载，但是assets文件夹最后也是要被webpack打包的，所以<img :src="xxx" />这里的:src会把后面的路径当做一串字符加载，而不是当做图片路径加载，所以在开发过程中这样写图片是会加载失效的。当然：如果只是开发中为了使用图片，可以暂时写成:src="/static/xxx/xxx.xxx",这样子图片加载是没有问题的，后期进行review的话把路径改回成assets里的相对路径也是可以的，推荐另外一种解决方式是在data里面：

imgList: [

        {img: require('../assets/home/button/home2.png'), name: '首页', link: '/'},

        {img: require('../assets/home/button/hospital1.png'), name: '医院', link: '/layout/hospital'},

        {img: require('../assets/home/button/task1.png'), name: '任务', link: '/layout/task'},

        {img: require('../assets/home/button/team1.png'), name: '团队', link: '/layout/team'},

        {img: require('../assets/home/button/persenal1.png'), name: '个人中心', link: '/layout/personalCenter'}

      ]

这样去加载图片，把图片路径利用模块加载require进来，利用require把图片路径完整保存下来，得以正常加载。 <img :src="imgList[x].img"/>这样就可以解决了开发过程中:src正常加载assets中的图片的问题了。当然，这还要根据每个开发团队的习惯来区别，有些团队就会把图片放在static里面，不让图片打包；有些团队希望更好的优化，提升性能，放在assets里面，所以还是根据各位的应用场景来摸索处理吧。

                                                                                                                                                               以上只是个人研究不深的成果，有很多不对的地方望各位提出，我来向各位学习。。。