[TOC] ## 绝对路径 vue的绝对路径`/pages/xxx/xxx` ``` // 图片 <image class="logo" src="/static/logo.png"></image> // @开头的绝对路径以及相对路径会经过base64转换规则校验 <image class="logo" src="@/static/logo.png"></image> //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导入 ``` <template> <view class="index" :style="{backgroundImage:`url(${indexBackgroundImage})`,backgroundSize: 'cover'}"> <!--你的内容--> </view> </template> <script> import indexBackgroundImage from "@/static/img/account_index.jpg" export default { data() { return { indexBackgroundImage:indexBackgroundImage } }, } </script> ``` ## 字体图标 注意事项与图片相似 示例 ``` @font-face { font-family: test1-icon; src: url('~@/static/iconfont.ttf'); } .test { font-family: iconfont; margin-left: 20rpx; } ```