详解vue-cil和webpack中本地静态图片的路径问题解决方案


Posted in Javascript onSeptember 27, 2017

本文介绍了vue-cil和webpack中本地静态图片的路径问题解决方案,分享给大家,具体如下:

1 本地图片动态绑定img的src属性

一般我们在html中或者vue组件文件中引用图片是这样,这是不需要做特别处理的

详解vue-cil和webpack中本地静态图片的路径问题解决方案

详解vue-cil和webpack中本地静态图片的路径问题解决方案

我们将图片放入assets中或者重新建立个文件夹img什么的都可以,随意~

但是我们这时候可能会有个需求就是我们要动态绑定一组本地图片

详解vue-cil和webpack中本地静态图片的路径问题解决方案

1 将图片当成模块先引进来,再绑定

详解vue-cil和webpack中本地静态图片的路径问题解决方案

但是这种做法局限性比较大,模块化差,代码不好看 。

如果我做的是纯静态的网站展示,有许多的本地静态资源需要加载,里面包括本地数据和本地图片混合的好几组,那不是要麻烦死~

1.1 所以我们需要三步

第一步我们在src下面建立一个json文件夹里面放置静态的json数据

详解vue-cil和webpack中本地静态图片的路径问题解决方案

第二步将所有的静态图片资源放在和src同级目录下的static文件夹下

详解vue-cil和webpack中本地静态图片的路径问题解决方案

第三步你的路径可以写成自然的'../../static/img/xxx.png' 也可以按照红框中的写法(这种写法对应的是编译后文件的目录)

详解vue-cil和webpack中本地静态图片的路径问题解决方案

这样子按照平常的动态绑定src属性你的图片路径在开发模式下和生产模式下的图片资源路径都是不会出问题的

1.2 小问题

但也有个问题就是这种方式引用图片是不会被url等加载器处理的

详解vue-cil和webpack中本地静态图片的路径问题解决方案

上面的红框都是这种方式,最下面的红框是用require的方式将图片引进来的(被当成模块被url-loader处理,加入了hash值)

这个需要看网站本身的性质和具体业务以及个人取舍了,当然也可以混合着用,灵活一点没有死的处理方法!

2 css中的本地图片路径在打包后的问题

你的项目在开发模式下css中用url()引用图片是正常的,但是打包后图片路径却并没有被处理或者说特别怪异

导致本地图片资源无法加载,是不是有这样的困惑?

只需要在原有的一个插件上添加一段代码即可:

详解vue-cil和webpack中本地静态图片的路径问题解决方案

这个插件大家又应该都比较熟悉,就是将css从打包中单独提取出来作为一个文件夹,上面这个是vue-cil的编译模板,大家可以根据这个参考一下

publicPath这个配置属性的具体其他用法大家可以去官网看看,或者看看源码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
浅谈Javascript中匀速运动的停止条件
Dec 19 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
vue.js实例todoList项目
Jul 07 Javascript
详解ES7 Decorator 入门解析
Feb 18 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
泛谈JS逻辑判断选择器 || &&
May 24 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
深入掌握 react的 setState的工作机制
Sep 27 #Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 #Javascript
JavaScript实现打印星型金字塔功能实例分析
Sep 27 #Javascript
微信小程序 按钮滑动的实现方法
Sep 27 #Javascript
详解Vue-cli代理解决跨域问题
Sep 27 #Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
javascript 作用于作用域链的详解
Sep 27 #Javascript
You might like
一个颜色轮换的简单例子
2006/10/09 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
Ajax同步与异步传输的示例代码
2013/11/21 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
js中less常用的方法小结
2017/08/09 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Python操作MongoDB详解及实例
2017/05/18 Python
使用python实现个性化词云的方法
2017/06/16 Python
如何在python中使用selenium的示例
2017/12/26 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
实习求职信
2013/12/01 职场文书
毕业生就业自荐信
2013/12/04 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
一年级班主任感言
2014/03/08 职场文书
担保书怎么写
2014/04/01 职场文书
2014年幼儿园园长工作总结
2014/12/17 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
《圆的面积》教学反思
2016/02/19 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis