[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; } ```