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>

示例源码如下，请查看 pre > code 标签中的内容

<!-- 绝对路径，/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 转换规则校验
引入的静态资源在非 web 平台，均不转为 base64。
web 平台，小于 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');

示例源码如下，请查看 pre > code 标签中的内容

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

注意

自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);

示例源码如下，请查看 pre > code 标签中的内容

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

字体文件可以存放在项目任意目录，在 css 文件或 style 标签中使用相对路径引入：

@font-face {
  font-family: 'CustomFont';
  src: url('./fonts/custom.woff2') format('woff2');
}

示例源码如下，请查看 pre > code 标签中的内容

@font-face {
  font-family: 'CustomFont';
  src: url('./fonts/custom.woff2') format('woff2');
}

Tips

引入字体图标请参考字体图标
@开头的绝对路径以及相对路径会经过 base64 转换规则校验
在不支持本地图片的平台中，小于 40kb 的图片一定会转为 base64。（共四个平台：mp-weixin、mp-qq、mp-toutiao、app v2）
web 平台，小于 4kb 会转 base64，超出 4kb 时不转。
其余平台不会转 base64

# js/uts 引入静态资源

js/uts 中引入静态资源，多用于静态资源存放在非 static 目录中的情况，可以使用 import 引入相对路径或绝对路径。

示例：目录结构如下，static 目录和页面目录下分别有静态资源：


├── pages
│   └── index
│       ├── index.uvue
│       └── icon.png
└── static
    └── logo.png

示例源码如下，请查看 pre > code 标签中的内容

├── pages
│   └── index
│       ├── index.uvue
│       └── icon.png
└── static
    └── logo.png

正常情况下，在 image 的 src 中直接引入 static 目录下的 logo.png，可以使用相对路径或绝对路径：

<!-- /pages/index/index.uvue -->
<template>
	<view class="content">
        <image src="../../static/logo.png" />
        <image src="/static/logo.png" />
        <image src="@/static/logo.png" />
	</view>
</template>

示例源码如下，请查看 pre > code 标签中的内容

<!-- /pages/index/index.uvue -->
<template>
	<view class="content">
        <image src="../../static/logo.png" />
        <image src="/static/logo.png" />
        <image src="@/static/logo.png" />
	</view>
</template>

而引入 index 目录下的 icon.png 时，无论使用相对路径还是绝对路径，都无法显示，所以此时需要在 js/uts 中使用 import 引入：

<!-- /pages/index/index.uvue -->
<template>
	<view class="content">
        <image :src="src" />
	</view>
</template>

<script>
// 使用 import 引入静态资源，并在 data 中赋值引用
import icon_src from './icon.png'
export default {
  data() {
    return {
      src: icon_src
    }
  },
}
</script>

示例源码如下，请查看 pre > code 标签中的内容

<!-- /pages/index/index.uvue -->
<template>
	<view class="content">
        <image :src="src" />
	</view>
</template>

<script>
// 使用 import 引入静态资源，并在 data 中赋值引用
import icon_src from './icon.png'
export default {
  data() {
    return {
      src: icon_src
    }
  },
}
</script>