简体中文
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>
注意
@
开头的绝对路径以及相对路径会经过 base64 转换规则校验HBuilderX 2.6.6
起template
内支持@
开头路径引入静态资源,旧版本不支持此方式HBuilderX 2.6.9
起template
节点中引用静态资源文件时(如:图片),调整查找策略为【基于当前文件的路径搜索】,与其他平台保持一致
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 转换规则校验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
保持一致
static -> img
下, 如小于 4k 则转为base64