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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
深入浅析Node.js 事件循环、定时器和process.nextTick()
Oct 22 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 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
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
番茄的表单验证类代码修改版
2008/07/18 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
js和C# 时间日期格式转换的简单实例
2016/05/28 Javascript
详解webpack+angular2开发环境搭建
2017/06/28 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
如何运行Python程序的方法
2013/04/21 Python
python装饰器实例大详解
2017/10/25 Python
Python聊天室程序(基础版)
2018/04/01 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
公司业务主管岗位职责
2013/12/07 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
销售员个人求职的自我评价
2014/02/10 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
投标承诺函范文
2015/01/21 职场文书
《所见》教学反思
2016/02/23 职场文书
详解如何在Canvas中添加事件的方法
2021/04/17 Javascript