详解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 分栏效果实现代码
Aug 29 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
js变换显示图片的实例
Apr 16 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
AngularJS入门教程之ng-class 指令用法
Aug 01 Javascript
js自制图片放大镜功能
Jan 24 Javascript
微信小程序五星评分效果实现代码
Apr 06 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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 裁剪图片成固定大小代码方法
2009/09/09 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
两个Javascript小tip资料
2010/11/23 Javascript
50个比较实用jQuery代码段
2011/09/18 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
js生成验证码并直接在前端判断
2015/05/15 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
利用Node.js制作爬取大众点评的爬虫
2016/09/22 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
vue-loader教程介绍
2017/06/14 Javascript
基于复选框demo(分享)
2017/09/27 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
python 实现人和电脑猜拳的示例代码
2020/03/02 Python
Python json读写方式和字典相互转化
2020/04/18 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
高中三年学习生活的自我评价
2013/10/10 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
会计与出纳自荐书范文
2014/03/16 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript