模板内引入静态资源

Introduce static resources into the template

# Introduce static resources into the template

When introducing static resources into template, such as image, video and other tags of the src attribute, you can use a relative path or an absolute path in the form as follows

<!-- For absolute path, /static refers to the static directory under the root directory. For cli project, /static refers to the static directory under the src directory -->
<image class="logo" src="/static/logo.png"></image>
<image class="logo" src="@/static/logo.png"></image>
<!-- Relative path -->
<image class="logo" src="../../static/logo.png"></image>

Notice

@开头的绝对路径以及相对路径会经过 base64 转换规则校验
引入的静态资源在非 web 平台，均不转为 base64。
web 平台，小于 4kb 的资源会被转换成 base64，其余不转。
From HBuilderX 2.6.6, template supports the introduction of static resources in the path starting with @, which is not supported by the old version.
From HBuilderX 2.6.9 onwards, when a static resource file (such as an image) is referenced in the template node on the App platform, adjust the search strategy to [Search based on the path of the current file], which is consistent with other platforms
The image tag in the Alipay applet component cannot use a relative path

# css import static resources

When importing a css file in a css file or a style tag (similar to scss and less files), you can use a relative path or an absolute path (HBuilderX 2.6.6)

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

Notice

From HBuilderX 2.6.6, static resources are imported using absolute paths, which is not supported by the old version.

The image path referenced in the css file or the style tag can use a relative path or an absolute path. It should be noted that some css files on the applet side are not allowed to refer to local files (please refer to the precautions).

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

Tips

引入字体图标请参考，字体图标
Absolute paths and relative paths starting with @ will be checked by base64 conversion rules
不支持本地图片的平台，小于 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

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

<!-- /pages/index/index.vue -->
<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.vue -->
<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>