深入浅出vue图片路径的实现


Posted in Javascript onSeptember 04, 2019

基础

1.webpack打包本质

本质就是nodejs去执行webpack脚本,由webpack脚本对项目各个文件进行必要的编译(通俗而言即字符串处理),再输出到某个目录

2.import from 和require

webpack相关脚本中的require和我们前端js文件中使用的require函数不是一回事,它的require是nodejs的关键字。

而前端js文件中,使用到的require在编译时相当于一个webpack定义的关键字,运行时则是webpack提供的一个函数。主要能力有:完成导入,参数可以省略部分后缀名(需要配置)、是目录时导入该目录下的index.js、能够使用别名(alias,需要配置)、导入图片(实际导入为base64编码后的字符串),通过编译时提供信息给各个loader处理以获得各种加载导入功能。import from是webpack提供的语法糖,可当作是const xx=require(xxxx)的组合。

3.webpack模块化处理解析配置

即webpack的resolve配置:解析(resolve) 

resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
  '@': resolve('src'),//此resolve通常是外面定义的一个nodejs的函数,用于生成绝对路径
  '@assets': resolve('src/assets')
 }
 },

上面require提到的别名、可省略扩展名在这里配置。

至于require函数中的路径参数,具体的解析法则如下:webpack如何解析代码模块路径

1.解析相对路径
查找相对当前模块的路径下是否有对应文件或文件夹
是文件则直接加载
是文件夹则继续查找文件夹下的 package.json 文件
有 package.json 文件则按照文件中 main 字段的文件名来查找文件
无 package.json 或者无 main 字段则查找 index.js 文件.

2.解析模块名
查找当前文件目录下,父级目录及以上目录下的 node_modules 文件夹,看是否有对应名称的模块

3.解析绝对路径
直接查找对应路径的文件

正文

1.图片处理及路径转换

一般由url-loader和file-loader处理。

url-loader

这个简单,把小图片转换成base64编码并返回该base64编码的字符串。即js代码var jpg=require('./assets/a.jpg')中,如果编译时能找到该图片且该图片大小小于规定值,那么url-loader返回该图片的base64编码,变量jpg的值将会是该图片的base64编码。

file-loader

file-loader将处理url-loader没处理的那些大图片,它会把图片复制到指定目录并返回public URL(参见file-loader文档),代表编译后运行时该图片的url路径字符串。即js代码var jpg=require('./assets/b.jpg')中,如果编译时能找到该图片,那么jpg的值将会是/img/b.jpg(具体取决于配置)

当前目录./的差异

注意css和js、html的当前路径不一致。css的./是指该css文件所在路径,而js、html中的./是指浏览器当前地址栏的url的路径目录。

2.html、js、css的处理

js中使用require函数就行,这里谈一下html和css中的处理。

html中,由vue-loader提供处理(语法糖)。其默认选项下,会把video、img、source标签的src属性放入require函数并把结果替换到原位置。也就是: vue-loader提取这些标签src属性->require函数->file-loader或url-loader处理->使用返回值进行替换。类似的,可以右转百度搜索 vue-loader transformToRequire 这个东西,你可以扩展它让其他标签的属性同样拥有该语法糖。

css中,由css-loader提供处理。类似于上面的html,css-loader会把url(./assets/b.jpg)给处理成url(/img/b.jpg),同样通过require函数获取处理结果。

注意,在html和css中,绝对路径的写法编译时将不被处理(loader判断),即url(/assets/b.jpg)编译后不变。而js中require('/assets/b.jpg')编译时将被认为是打包本地磁盘中/assets/b.jpg文件,不存在时将编译报错。

3.进阶:别名的使用

即上面提到的webpack模块化处理,js中@/assets/a.jpg这种。

html中:可直接使用,也可使用~指示webpack这是一个模块路径,即src='@/assets/a.jpg'或src='~@/assets/a.jpg'都是可行的
css中,必须使用~指示webpack这是一个模块路径,即url(~@/assets/b.jpg)

js中,不用写~,webpack一定对其使用模块路径解析。

同时注意,需要把别名字符串的部分直接包含在参数中。即

let number=1, p1='./', p2='@assets'

img.src=require(`./assets/img${number}.jpg`)//正确
img.src=require(`@assets/img${number}.jpg`)//正确
img.src=require(`${p1}assets/img${number}.jpg`)//正确

img.src=require(`${p2}/img${number}.jpg`)//错误

我也不知道这个是bug还是什么鬼了,有了解的大佬可以说下

4.hash和history模式

应该都知道,即http://localhost/#/a/b/c这样的hash模式中,html和js的./a.jpg均为http://localhost/a.jpg。而http://localhost/a/b/c这样的history模式中,html和js的./a.jpg均为http://localhost/a/b/a.jpg,此时如果设置publicPath: './',那么请注意前面提到过css中./是以css文件所在目录为起点的,而loader会把html的标签的src、css的url函数的路径统一处理,此时可能会由于html、css的当前目录./差异导致某一方找不到图片。

解决方案简单,history模式时publicPath不要用相对路径、html或css其中一方手动注意代码写法绕开loader的处理即可,逻辑搞清即可,处理方法多样。

5.常见问题

不了解@vue/cli项目中file-loader的选项设置、不了解webpack各模板中如何间接设置file-loader的选项设置。
解决靠自己了,或者右转百度,说不定直接抄过来给file-loader设置publicPath: './'恰好对上项目结构而解决问题

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

Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
Nov 27 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
简介AngularJS中$http服务的用法
Feb 06 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
Mar 30 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
react实现复选框全选和反选组件效果
Aug 25 Javascript
webpack 如何解析代码模块路径的实现
Sep 04 #Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 #Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 #Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 #Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 #Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 #Javascript
微信小程序按钮点击动画效果的实现
Sep 04 #Javascript
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP实现上传多文件示例代码
2017/02/20 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
详解javascript函数的参数
2015/11/10 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
2019/04/25 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
[02:23]完美世界全国高校联赛街访DOTA2第一期
2019/11/28 DOTA
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python 图片去噪的方法示例
2019/07/09 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Python处理PDF与CDF实例
2020/02/26 Python
python环境搭建和pycharm的安装配置及汉化详细教程(零基础小白版)
2020/08/19 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
python简单实现插入排序实例代码
2020/12/16 Python
python实现学生通讯录管理系统
2021/02/25 Python
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
初中音乐教学反思
2014/01/12 职场文书
文艺演出策划方案
2014/06/07 职场文书
监察建议书
2015/02/04 职场文书
2015年暑期社会实践总结
2015/07/13 职场文书