在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里面,所以还是根据各位的应用场景来摸索处理吧。
以上只是个人研究不深的成果,有很多不对的地方望各位提出,我来向各位学习。。。