详解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 相关文章推荐
Js切换功能的简单方法
Nov 23 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
如何使用Javascript中的this关键字
May 28 Javascript
JavaScript实现雪花飘落效果
Dec 27 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
PHP函数学习之PHP函数点评
2012/07/05 PHP
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
session 加入redis的实现代码
2016/07/15 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
python 处理string到hex脚本的方法
2018/10/26 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
python实现马丁策略的实例详解
2021/01/15 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
大一自我鉴定范文
2013/12/27 职场文书
银行职业规划书范文
2013/12/28 职场文书
应届生如何写自荐信
2014/01/05 职场文书
西安交大自主招生自荐信
2014/01/27 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
安全保证书格式
2015/02/28 职场文书
2015年度团总支工作总结
2015/04/23 职场文书
起诉状范本
2015/05/20 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server