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

基础

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: './'恰好对上项目结构而解决问题

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

(0)

相关推荐

  • 详解Vue.js中引入图片路径的几种方式

    vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 JavaScript 被导入或在 template/CSS 中通过相对路径(以 . 开头)被引用.这类引用会被 webpack 处理. 诸如 <img src="..."> . background: url(...) 和 CSS @import 的资源 例如, url(./imag

  • vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • vue webpack打包后图片路径错误的完美解决方法

    项目用run dev build 打包后,发现很多图片都不显示,在本地是没有问题的啊!找原因发现通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 因为我们的图片路径都是经历过文件夹的,在本地引用图片是绝对路径,但打包后因为把配置的static文件夹当成了根路径,所以很多图片找不到都不显示. 解决办法如图: (1). 修改 assetsPublicPath: './' (2).打开webpack.prod.conf.js,在output:增加 publicPath:

  • vue中img src 动态加载本地json的图片路径写法

    目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法 页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu

  • vue中本地静态图片路径写法

    这里写图片描述 需求:如何components里面的index.vue怎样能把assets里面的图片拿出来. 1.在img标签里面直接写上路径: <img src="../assets/a1.png" class="" width="100%"/> 2.利用数组保存再循环输出: <el-carousel-item v-for="item in carouselData" :key="item.id&

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

    基础 1.webpack打包本质 本质就是nodejs去执行webpack脚本,由webpack脚本对项目各个文件进行必要的编译(通俗而言即字符串处理),再输出到某个目录 2.import from 和require webpack相关脚本中的require和我们前端js文件中使用的require函数不是一回事,它的require是nodejs的关键字. 而前端js文件中,使用到的require在编译时相当于一个webpack定义的关键字,运行时则是webpack提供的一个函数.主要能力有:完成

  • vue 图片路径 “@/assets“ 报错问题及解决

    目录 问题 解决 为什么 静态导入文件路径 静态导入绝对路径 动态导入相对路径 动态导入绝对路径 问题 在更改背景图片时写的图片相对路径是这样的: 由于@在webpack 被resolve.alias配置下等价于/src,然后直接运行了程序结果报错了 报错状态: 大概意思就是说,无法解析 asset 包 解决 经过查询资料找到了解决办法: 由于相对根目录的路径 “/assets/background.png” webpack不解析 此时需要在@前加上“~” 因为带“~”的路径 “~@/asset

  • 解决vue v-for src 图片路径问题 404

    我的代码结构如下所示不能执行,会出现报错 <RadioGroup v-model="animal"> <Radio v-for='a in radio_arr' label={{a}}></Radio> </RadioGroup> export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } } } 报错信息: 修改代码如下: 修改内容为 la

  • vue 项目打包时样式及背景图片路径找不到的解决方式

    问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到: 解决方法: 主要是需要单独为 css 配置 publicPath . ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独配置 publicPath . 对于用 vue-cli 生成的项目,dist 目录结构如下: dist ├── index.html └── static     ├── css     ├── img     └── js 经

  • vue实现图片路径转二进制文件流(binary)

    目录 图片路径转二进制文件流(binary) 图片路径转换为Base64 Base64转换为二进制文件流(binary) 下载二进制流文件 Blob.ajax(axios) 图片路径转二进制文件流(binary) vue项目中,需要将本地的图片或前端生成的图片传回后端,传回给后端需要将图片路径转换为二进制文件流,也就是参数中显示的(binary),这时就需要进行图片路径的转换. 图片路径转换为Base64 imageUrlToBase64(imageUrl) {   let image = ne

随机推荐