# 模板内引入静态资源

template内引入静态资源,如imagevideo等标签的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>
复制代码

注意

  • @开头的绝对路径以及相对路径会经过 base64 转换规则校验
  • 引入的静态资源在非 web 平台,均不转为 base64。
  • web 平台,小于 4kb 的资源会被转换成 base64,其余不转。
  • HBuilderX 2.6.6template内支持@开头路径引入静态资源,旧版本不支持此方式
  • App 平台自HBuilderX 2.6.9template节点中引用静态资源文件时(如:图片),调整查找策略为【基于当前文件的路径搜索】,与其他平台保持一致
  • 支付宝小程序组件内 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');
复制代码

注意

  • 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);
复制代码

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                  

复制代码

正常情况下,如 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>

复制代码

# 静态资源引入注意事项

通常项目中规定根目录下的 static 为静态资源文件夹(目前暂不支持修改),资源存放此处后,可在任意文件直接使用相对或者绝对路径引用,具体参考上述模板 css/js/uts 中引入静态资源的说明。

而非 static 目录的静态资源,不支持直接引用,需要在 js/uts 中使用 import 来引入,确保路径正确。

综上所述,我们总结一下静态资源引用的注意事项:

  • 在模板或者 css 文件使用 static 目录中的静态资源,无需特殊处理,可直接通过相对路径或者绝对路径直接引入。
  • js/uts 文件使用静态资源,需要使用 import 来引入。
  • 不管在任何文件引入非 static 目中的静态资源,均需在 js/uts 文件使用 import 来引入。

# 静态资源编译规则

项目 static 目录下的静态资源,会被直接拷贝到编译后目录的 static 目录下。

static目录下的静态资源在vue3下,被引用的资源会编译到 assets 目录下,并重新命名为 原始名称+内容hash,如:logo.png 会编译为类似 logo.cfd8fa94.png 的名称。如果该静态资源未被引用,则不会被编译器处理。

static目录下的静态资源在vue2不同平台下,编译规则有些不同:

HBuilderX 4.0 起已和 vue3 保持一致

  • web: 静态资源将会编译到 static -> img 下, 如小于 4k 则转为base64
  • 小程序:静态资源将会编译到资源同名文件下,如小于 40kb 则转base64
  • app: 静态资源将会编译到资源同名文件下