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 相关文章推荐
jQuery中jqGrid分页实现代码
Nov 04 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
javascript面向对象特性代码实例
Jun 12 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
在vue中使用css modules替代scroped的方法
Mar 10 Javascript
vue中子组件的methods中获取到props中的值方法
Aug 27 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
vue路由中前进后退的一些事儿
May 18 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
利用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的cms
2010/12/19 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
用js替换除数字与逗号以外的所有字符的代码
2014/06/07 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
JavaScript中getUTCSeconds()方法的使用详解
2015/06/11 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
AngularJS过滤器filter用法实例分析
2016/11/04 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
用python实现学生管理系统
2020/07/24 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
北京SQL新华信咨询
2016/09/30 面试题
教师实习自我鉴定
2013/12/11 职场文书
应届大学生自荐书
2014/06/17 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
git stash(储藏)的用法总结
2022/06/25 Servers