木灵鱼儿
阅读:1425
vue cli3-4 绑定图片方法大全
是不是经常头疼vue cli项目怎么绑定图片,是不是感觉为什么路径是对的,但是就是会报错?
那么我们就来一一讲解,vue cli怎么才能绑定图片。
style标签中引用图片
我们的资源存放路径就两个:
- 纯静态的public文件夹
- 动态的src/assets文件夹
assets里的图片,如果很小的话,webpack打包的时候会将其转为base64,这样就减少了文件的请求数量,但是相对来说,如果特别多小图片,那么反而会增加js文件的大小,因为base64并不是压缩,如果文件很大,base64占用的存储可能会比原文件还要大一些。
所以,优化很重要,但是要看项目需求。
引入public中的资源
首先我们要知道,public文件夹中的资源,在打包的时候,他会直接释出,也就是说,如果public下有一个images文件夹,你打包后,public文件不存在,而images文件夹将被抛出到最上层。
所以,我们如果需要直接引入这个public下的images下的图片。
路径要写成如下:
.content {
background-image: url("/images/bg.png");
}
实际上他引用的是:public/images/bg.png
当然个人并不推荐这样写,因为会有一种情况导致出现问题,那就是打包后的项目,存放线上时并不是根目录。
那么images就不会存在于最上层,就会出现资源404的情况。
怎么办?
配置publicPath
官方说要配置一下publicPath
打开vue.config.js文件,在里面添加一个publicPath属性。
module.exports = {
publicPath: "./",
}
./
表示所有的资源都相对路径,但是style里面的css使用的路径并不会自动变更,所以,这样只能保证页面不会加载时空白,所以,要么使用变量的形式引入路径前缀,要么,自己固定一个路径。
固定路径前缀
因为变量是写在script中,所以这块就先不说,先讲style里面的处理方法
.content {
background-image: url("https://www.xxxx.xxx/xxx/xx/images/bg.png");
}
https://www.xxxx.xxx/xxx/xx
就是你项目的网址+项目所在的目录。
这样的话每次写都要加个很长的地址段,很麻烦,所以我们可以采用一些方法。
就以scss来讲,我们可以配置一个全局变量scss文件,在这个文件里面我们配置一个变量baseUrl,然后每次使用的时候拼接一下
$baseUrl: "https://www.baidu.com";
.content {
background-image: url("#{$baseUrl}/images/bg.png");
}
如何配置全局scss变量,本博客搜索全局scss即可,有对应的文章。
style引入src/assets下的资源
如果你的图片都很大的话,就不用在意base64了。
assets有两种引入方式:
1. 相对路径法
.content {
background-image: url("../../../assets/images/bg.png");
}
相对于当前vue文件,一层一层往上走,这样如果路径不深的话好说,太深了就不行了。
2. 路径变量名
众所周知,@
符号被用来表示src路径,我们在css中也可以使用这个
.content {
background-image: url("~@/assets/images/bg.png");
}
css中使用@
必须在前面加~
波浪符。
assets中的图片,不管你文件存放在什么样的目录中(例:assets/images),打包后统一存在在dist/img目录下。且css中的引用路径也会自动变更。
template中引用资源
引入public中资源需要创建变量路径,在script中会讲到
<div :style="{'backgroundImage':`url(${require('@/assets/images/bg.png')})`}">
</div>
vue绑定变量的方式,通过require来引入图片。
这种相对来说省事,但是比较占据代码,可以和变量配合使用。
比如我们在data中创建一个变量:
data () {
return {
bg: require('@/assets/images/bg.png')
}
}
<div :style="{'backgroundImage':`url(${bg}`}">
</div>
简单一点的:
<img :src="require('@/assets/images/bg.png')">
这样的也是可以的。
template就这两种方式引入资源。
script 引入资源
不建议引入public中资源,不方便,也没有官方示例
script的引入有几种方式:
- import引入
- data中require引入
- data中存放变量路径,引用时拼接
1. import引入
<script>
import bg from "@/assets/images/bg.png";
export default {
data(){
return {
bg,
}
}
}
</script>
import 引入的资源,如果要在template中使用,我们需要在data中创建一个变量用于保存资源,如果只在script中使用,就不用再data中创建变量保存,直接使用import时所命名的名字。
<div :style="{'backgroundImage':`url(${bg}`}">
</div>
2. data中require引入
import引入相对来说太麻烦了,引入完还要创建变量,所以如果想省点事,可以使用这种方式
<script>
export default {
data(){
return {
bg: require("@/assets/images/bg.png"),
}
}
}
</script>
<div :style="{'backgroundImage':`url(${bg}`}">
</div>
这样也是可以的。
3. data中存放变量路径,引用时拼接
这种方式适用于public中的资源。假设我们的bg存放在public/images下
<script>
export default {
data(){
return {
public: process.env.BASE_URL,
}
}
}
</script>
<div :style="{'backgroundImage':`url(${public}images/bg.png`}">
</div>
变量public
会自动生成public文件夹的路径,且末尾是带/
斜杠的,所以写的时候不要再images前加斜杠了。
以上就是对vue cli绑定图片的方法大全,大家可以按需使用,相对来说assets中存放图片是一个趋势,因为方便,如果是小图片多的话,可以考虑合并成一个大图使用,这样也能存放于assets中。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
vue-i18n 的使用方式
vue2与vue3使用的版本以及区别vue2安装:yarn add vue-i18n@8安装8.xx的版本,9.xx是vue3使用的。vue3安装:yarn add vue-i18n区别:vue-i18n@8挂载的时候,是挂载的未实例化的i18对象,vue-i18n@9挂载的是实例化后的i18对象。具体代码后面会有。一些经验i18n的语言文件可以是js,可以是json,ts没测试,然后vue2版他官方例子用的是js,vue3版用的是json,个人测试都可以,所以建议都用json,统一格式。挂载插件的时候,vue2版挂载的是未实例化前的对象,vue3版挂载的是实例化后的对象。多看官方文档,...
vue cli异步路由加载原理
webpack会解析路由文件的引入,就算你是一个setTimeout输出的路由配置文件,或者if else判断的路由配置文件,他都会将你明文书写的路由vue文件打包。为什么?其原理未知,估计并不是解析代码,而且代码关键字的抓取。如果你是一个api返回的路由配置,webpack的无法准确感知到路由文件的是否被引入,所以它的办法是全部都打包,src目录下的所有vue文件全部会被打包成chunk-2d0b30b7.3576daad.js这种格式的文件。其中包裹components目录下的组件,哪怕你的这个组件已经被某个路由页明确引入了,这个路由除了会被打包到这个路由页,还会生成单独的chunk...
vue cli3-cli4 打包后项目在二级路径的方法
默认情况vue的build打包,都是基于根路径来进行的,但是,如果我们将打包的文件放置再二级目录,就会导致文件无法加载,页面空白。原因有两个:路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时,我们常常会看到一个base选项,内容如下:const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释:类型: string 默认值: "/"应用的基路径。例如,如果整个单页应用服务在 /app/ 下...

vue router 一个重定向页面的思路
当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...
关于 vue cli 的Network unavailable的问题分析以及修复方式
发现公司的项目,不管是vue2还是vue3,不管是新创建的还是旧项目,启动后Network永远是unavailable;就很离谱,导致每次想要局域网测试,只能手动在devServer中配置public属性,设置一个固定的本地ip地址。但是,你的ip地址并不是别人的ip地址,那么就会导致如果不小心上传了vue.config.js;那么同事一拉,哦吼,不懂得就说,哎呀,我的项目怎么启动不了了。这就很蛋疼了,所以我分析了一下这个问题的原因。首先,我的电脑的环境是没有问题的,网卡也是没有问题的,vue cli早就支持多个网卡了,所以多网卡问题就可以忽略。其实主要原因是因为一个不合法的ipv4地址...

vue 过滤器 驼峰与短横线相互转换的方法
自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...
使用vue.draggable拖拽组件遇到的一些问题
资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...
