模板内引用静态资源
template
内引用静态资源,如 image,video
等标签的 src
属性时,可以使用相对路径或绝对路径,如下:
<!-- 绝对路径,/static指根目录下的static目录,在cli项目中/static指src目录下的static目录 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
注意:
- @初始的绝对路径以及相对路径会通过
base64
转换规则校验 - 引入的静态资源在非
h5
平台,均不转为base64
H5
平台,小于4kb
的资源会被转换成base64
,其余不转- 自
HBuilderX 2.6.6-alpha
起template
内支持@
初始路径日期静态资源,旧版本不支持此方式
js 文件引用
js
文件或 script
标签内(包括 renderjs
等)日期 js
文件时,可以使用相对路径和绝对路径,如下:
// 绝对路径,@指向项目根目录,在cli项目中@指向src目录
import utils from '@/common/utils.js'
// 相对路径
import utils from '../../common/utils.js'
js
文件不支持使用 /
开头的方式引用。
css发布静态资源
css
文件或 style
标签内引用 css
文件时( scss,less
文件同理),只能使用相对路径,如下:
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
自 HBuilderX 2.6.6-alpha 起支持绝对路径日期静态资源,旧版本不支持此方式。
css
文件或 style
标签内引用的图片路径可以使用相对路径也可以使用绝对路径,(有些小程序端 css
文件可以引用本地文件)。如下:
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);
注意:
- @初始的绝对路径以及相对路径会通过
base64
转换规则校验 - 不支持本地图片的平台,小于
40kb
,一定会转base64
。(共四个平台mp-weixin,mp-qq,mp-toutiao,app v2
) h5
平台,小于4kb
会转base64
,超过4kb
时不转。- 其余平台不会转
base64