资源路径
最后更新于:2022-04-02 03:36:51
[TOC]
## 绝对路径
vue的绝对路径`/pages/xxx/xxx`
```
// 图片
// @开头的绝对路径以及相对路径会经过base64转换规则校验
//js 引入
import add from '@/common/add.js'
//css 文件
@import url('/common/uni.css');
@import url('@/common/uni.css');
```
## 背景图片
* 支持网络路径图片。
* **小程序**不支持在css中使用本地文件,包括本地的背景图和字体文件。需以base64方式方可使用。
* 使用本地路径背景图片需注意:
1. 为方便开发者,在背景图片小于 40kb 时,`uni-app`编译到不支持本地背景图的平台时,会自动将其转化为 base64 格式;
2. 图片大于等于 40kb,会有性能问题,不建议使用太大的背景图,如开发者必须使用,则需自己将其转换为 base64 格式使用,或将其挪到服务器上,从网络地址引用。
3. 本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径
示例:
1. 直接导入
```
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
background-image: url('~@/static/logo.png'); //推荐 ~@
```
2. 转为 base64导入
```
```
## 字体图标
注意事项与图片相似
示例
```
@font-face {
font-family: test1-icon;
src: url('~@/static/iconfont.ttf');
}
.test {
font-family: iconfont;
margin-left: 20rpx;
}
```
';