资源路径说明

模板内引入静态资源

template 内引入静态资源,如 image、video 等标签的 src 属性时,可以使用相对路径或者绝对路径,形式如下:

						
<-- 绝对路径 -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<-- 相对路径 -->
<image class="logo" src="../../static/logo.png"></image>
						
					

说明:

  • /static:指根目录下的static目录。
  • / 或 @:项目根目录。
  • 自 HBuilderX 2.6.6-alpha 起 template 内支持 @ 开头路径引入静态资源,旧版本不支持此方式。
  • @ 开头的绝对路径以及相对路径会经过 base64 转换规则校验。
  • 引入的静态资源在非 h5 平台,均不转为 base64。
  • H5 平台,小于 4kb 的资源会被转换成 base64,其余不转。
  • App 平台自 HBuilderX 2.6.9-alpha 起 template 节点中引用静态资源文件时(如:图片),调整查找策略为基于当前文件的路径搜索,与其他平台保持一致。
  • 支付宝小程序组件内 image 标签不可使用相对路径。

js 文件引入

js 文件或 script 标签内(包括 render.js 等)引入 js 文件时,可以使用相对路径和绝对路径,形式如下:

						
//绝对路径
import add from '@/common/add.js'
//相对路径
import add from '../../common/add.js'
						
					

说明:

  • @:项目根目录,js 文件不支持使用 / 开头的方式引入。

CSS 引入静态资源

css 文件或 style 标签内引入 css/scss/less 文件时,可以使用相对路径或绝对路径(HBuilderX 2.6.6-alpha):

						
/* 绝对路径 */
@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,一定会转 ase64。(共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2)
  • h5 平台,小于 4kb 会转 base64,超出 4kb 时不转。其余平台不会转 base64。