vue :src 文件路径错误问题的解决方法


Posted in Javascript onMay 15, 2018

首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助

 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src=”./logo.png”>background:url(./logo.png),”./logo.png”是相对资源路径,将有webpack解析为模块依赖
 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方文件的地方,不会被webpack解析。他会直接被复制到最终的打包目录(默认是dist/static)下。必须使用绝对路径引用这些文件,这是通过config.js文件中的build.assetsPublicbuild.assertsSubDirectory链接来确定的。任何放在static/中文件需要以绝对路径的形式引用:/static[filename]
 根据webpack的特性,总的来说就是static放不会变动的,第三档的文件,asserts放可能会变动的文件

问题来了,用js动态加载assets或者本文件的图片出现404的状态码

代码实例

<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
 return {
 images:[{src:'./1.png'},{./2.png}]
 }
}

跑起来发现图片不显示,错误码为404,

 原因:在webpack中会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,然后npm run dev 或者npm run build之后导致路径没有被加工【被webpack解析到的路径都会被解析为/static/img/[filename].png,完整地址为localhost:8080/static/img/[filename].png

 解决办法:

①将图片作为模块加载进去,比如images:[{src:require(‘./1.png')},{src:require(‘./2.png')}]这样webpack就能将其解析。

②将图片放到static目录下,但必须写成绝对路径如images:[{src:”/static/1.png”},{src:”/static/2.png”}]这样图片也会显示出来,当然你也可以通过在webpack.base.config.js定义来缩短路径的书写长度。

当然你说当本地图片太多时,这样写岂不是很麻烦,那么其实我们是一这样简化操作的。

第一步:在static里面新建一个json文件夹

vue :src 文件路径错误问题的解决方法

第二部:填写json文件,如图

vue :src 文件路径错误问题的解决方法

第三部:将json引入响应的vue文件中,解析引用就行了

vue :src 文件路径错误问题的解决方法

总结

以上所述是小编给大家介绍的vue :src 文件路径错误问题的简单解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 Javascript
javascript题目,重写函数让其无限相加
Feb 15 Javascript
jQuery中:hidden选择器用法实例
Dec 30 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
js实现跨域的多种方法
Dec 25 Javascript
Bootstrap 轮播(Carousel)插件
Dec 26 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
Feb 10 Javascript
js封装成插件_Canvas统计图插件编写实例
Sep 12 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue前端工程的搭建
Mar 31 Vue.js
利用npm 安装删除模块的方法
May 15 #Javascript
vux uploader 图片上传组件的安装使用方法
May 15 #Javascript
使用webpack搭建react开发环境的方法
May 15 #Javascript
浅谈Node.js 沙箱环境
May 15 #Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 #Javascript
WebPack配置vue多页面的技巧
May 15 #Javascript
修改npm全局安装模式的路径方法
May 15 #Javascript
You might like
PHP 强制下载文件代码
2010/10/24 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
页面使用密码保护代码
2013/04/10 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
Vue实现boradcast和dispatch的示例
2020/11/13 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python清除字符串里非字母字符的方法
2015/07/02 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
车间班长岗位职责
2013/11/30 职场文书
技术学校毕业生求职信分享
2013/12/02 职场文书
女方回门宴答谢词
2014/01/14 职场文书
保险专业求职信
2014/07/07 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
校友回访母校寄语
2015/02/26 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
2015年小学总务工作总结
2015/07/21 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书