vue :src 文件路径错误问题的解决方法
首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< 问题来了,用js动态加载assets或者本文件的图片出现404的状态码 代码实例
//js部分
data(){
return {
images:[{src:'./1.png'},{./2.png}]
}
}
跑起来发现图片不显示,错误码为404, 原因:在webpack中会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为 解决办法: ①将图片作为模块加载进去,比如 ②将图片放到static目录下,但必须写成绝对路径如 当然你说当本地图片太多时,这样写岂不是很麻烦,那么其实我们是一这样简化操作的。 第一步:在static里面新建一个json文件夹 第二部:填写json文件,如图 第三部:将json引入响应的vue文件中,解析引用就行了 总结以上所述是小编给大家介绍的vue :src 文件路径错误问题的简单解决方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |