木灵鱼儿
阅读:2126
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 cli3-cli4 打包后项目在二级路径的方法
默认情况vue的build打包,都是基于根路径来进行的,但是,如果我们将打包的文件放置再二级目录,就会导致文件无法加载,页面空白。原因有两个:路由路径无法正确匹配资源文件路径错误下面我们就来讲讲做法路由配置在路由实例的创建时,我们常常会看到一个base选项,内容如下:const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })base官方有很明确是解释:类型: string 默认值: "/"应用的基路径。例如,如果整个单页应用服务在 /app/ 下...

实现一个点击空白区域关闭显示的自定义指令
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
使用vue2.7的一些踩坑事项
eslint校验的一些问题(暂时无解)在初始化项目时勾选了eslint校验之后,升级vue 2.7版本后,eslint-plugin-vue这个插件需要升级到9+版本,我目前使用的版本是:"eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南:2.7日志官方居然把这个写在了变更日志里面,按道理最好官方的文档上也有一份说明的,但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题,但是有时候我们的SFC单文件组件开发的时候,template中的一些变量绑定还是会出现波浪线警告,这...
正确使用vue3的ts类型声明
前言使用了ts最头疼的是什么,除了类型声明应该没有第二家了,那么在vue3中如何正确的声明ts类型,代表着我们踏出了认识vue3的第一步,这非常重要,所以为此水个文章,分享给有需要的人。Volar 插件一开始我对于Volar并没有太大的需要,因为一直使用的Vetur,而且这个插件刚出来时并不完善,各种视频up讲的那个一键分屏功能其实也并不好用,虽然是个很有意思的东西,但是没有那种非要使用它的点,所以当时的我怀着这么一个疑问?为什么要用Volar ?现在我就通过两张图告诉你,它有多香!我们在template里面写代码,绑定变量最烦的是什么,就是我们写了个对象,但是忘了它的属性有哪些啊,使用...

关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
vuex 动态注册和卸载模块
概述一般情况下,我们的vuex数据都是静态的,store在首次初始化后数据的格式就定好了,在日常使用中也确实应该这么做。但是,随着业务的发展,vuex可能会变得非常的大,或者在多页面打包的时候,每个页面都需要vuex,但是如果把每个页面的vuex都写在一起,你会发现,原来我a页面可能只需要30个vuex的数据监听,但是会多出来其他页面的数据,这显然不应该的。所以,我们需要一个能够动态加载模块的方法,每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api:registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
vue-i18n 的使用方式
安装vue2版需要安装8.x版本的,9.x的是vue3版本使用上大同小异。vue2安装:yarn add vue-i18n@8vue3安装:yarn add vue-i18n封装官方虽然支持很不错的用法,但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...
vue cli异步路由加载原理
webpack会解析路由文件的引入,就算你是一个setTimeout输出的路由配置文件,或者if else判断的路由配置文件,他都会将你明文书写的路由vue文件打包。为什么?其原理未知,估计并不是解析代码,而且代码关键字的抓取。如果你是一个api返回的路由配置,webpack的无法准确感知到路由文件的是否被引入,所以它的办法是全部都打包,src目录下的所有vue文件全部会被打包成chunk-2d0b30b7.3576daad.js这种格式的文件。其中包裹components目录下的组件,哪怕你的这个组件已经被某个路由页明确引入了,这个路由除了会被打包到这个路由页,还会生成单独的chunk...
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地址...
