深入浅出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 相关文章推荐
js去字符串前后空格5种实现方法及比较
Apr 03 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
使用js显示当前时间示例
Mar 02 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
vue-router的两种模式的区别
May 30 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
MYSQL 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
php eval函数用法总结
2012/10/31 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
Python的MongoDB模块PyMongo操作方法集锦
2016/01/05 Python
python逆向入门教程
2018/01/15 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
python opencv实现运动检测
2018/07/10 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
银行实习鉴定
2013/12/13 职场文书
化学实验员岗位职责
2013/12/28 职场文书
毕业晚会主持词
2014/03/24 职场文书
平面设计专业求职信
2014/08/09 职场文书
升学宴答谢词
2015/01/05 职场文书
防卫过当辩护词
2015/05/21 职场文书
收入证明申请书
2015/06/12 职场文书
培训后的感想
2015/08/07 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
CSS子盒子水平和垂直居中的五种方法
2022/07/23 HTML / CSS