我转过几个弯 绕过那个小雨楼
拿着蒲扇摆着衣衫渡着紧箍咒
不问天涯不停留 喝过几壶酒
不过年少白头道义放胸口
倘若明天之后 遥看前尘剑封侯
似那天上神仙无所求
朝朝暮暮君如梦醒十分不为何理由
是真是假是惶恐是无休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
又过了几个弯 算尽天量道莫慌
踏这田园闻这芳草香
跌跌撞撞仗剑天涯折煞不枉无笔良
是梦是幻是温柔是家乡
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
路过这风雨花满楼 片刻都不停留
我本这书生进京赶考留下许多愁
你问有没有时候 我叹这天道默悠悠
能否与我一醉方休
谁能与我一醉方休
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中。
评论(0)