Uni-app资源路径说明

模板内引用静态资源

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>

例：

<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 add from '@/common/add.js'
// 相对路径
import add from '../../common/add.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