# 模板内引入静态资源
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>
1
2
3
4
5
2
3
4
5
注意
@开头的绝对路径以及相对路径会经过 base64 转换规则校验- 引入的静态资源在非 h5 平台，均不转为 base64。
- H5 平台，小于 4kb 的资源会被转换成 base64，其余不转。
- 自
HBuilderX 2.6.6起template内支持@开头路径引入静态资源，旧版本不支持此方式 - App 平台自
HBuilderX 2.6.9起template节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致 - 支付宝小程序组件内 image 标签不可使用相对路径
# css 引入静态资源
css文件或style标签内引入css文件时（scss、less 文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6）
/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');
1
2
3
4
5
2
3
4
5
注意
- 自
HBuilderX 2.6.6起支持绝对路径引入静态资源，旧版本不支持此方式
css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端 css 文件不允许引用本地文件（请看注意事项）。
/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);
1
2
3
4
5
2
3
4
5
Tips
- 引入字体图标请参考，字体图标
@开头的绝对路径以及相对路径会经过 base64 转换规则校验- 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
- h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。
- 其余平台不会转 base64