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 三种编解码方式
Feb 01 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
详解jQuery插件开发方式
Nov 22 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
js下拉菜单生成器dropMenu使用方法详解
Aug 01 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
关于vue的列表图片选中打钩操作
Sep 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
网站防止被刷票的一些思路与方法
2015/01/08 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
xmlHTTP实例
2006/10/24 Javascript
JavaScript null和undefined区别分析
2009/10/14 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
浅析jQuery EasyUI中的tree使用指南
2014/12/18 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
基于Javascript实现二级联动菜单效果
2016/03/04 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
jQuery Ajax File Upload实例源码
2016/12/12 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python读取图片属性信息的实现方法
2016/09/11 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Python中的xlrd模块使用原理解析
2020/05/21 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
维德科技C#面试题笔试题
2015/12/09 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
AJAX检测用户名是否存在的方法
2021/03/24 Javascript
优秀技术工人先进材料
2014/02/17 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
补充协议书
2015/01/28 职场文书
南湾猴岛导游词
2015/02/09 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技