介绍
本地静态图片（打包进小程序，推荐图标、头像、固定配图），存放在根目录下的 images 文件夹下
标准目录结构（通用规范）
project 小程序根目录
├─ images/ # 统一存放所有静态图片（最推荐）
│ ├─ avatar.png # 头像
│ ├─ banner.jpg # 轮播图
│ └─ default.png # 加载失败兜底图
├─ pages/
│ ├─ index/
│ │ ├─ index.wxml
│ │ ├─ index.js
│ │ ├─ index.wxss
│ │ └─ index.json
├─ app.json
└─ app.wxss
1. 根目录 images（统一管理，最优）
引用写法：
<!-- 绝对路径（推荐，不会层级错乱） -->
<image src="/images/default.png"></image>
<!-- 相对路径 -->
<image src="../../images/banner.jpg"></image>
创建 images 文件夹
2. tabbar 图标固定放根目录 images
app.json 配置 tab 图片必须用绝对路径
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/home-active.png"
}
]
}
创建 images 文件夹
3. 页面内局部图片（仅当前页面使用）
目录：pages/index/images/xxx.png
引用：
<image src="./images/icon.png"></image>
缺点：图片分散，不好统一管理，仅小型页面图标可用。
禁止操作
- 不要放在 pages 外面新建多层杂乱文件夹；
- 不要放在 utils、components 工具文件夹里存大图；
- 不要直接丢根目录，文件混乱难维护。
图片存放规范建议
- 图标、tab图、兜底图 → 主包
/images； - 页面专属装饰图 → 当前页面
images； - 商品、用户上传动态图 → 后端OSS线上地址；
- 图片统一压缩，单张小于300kb，减少包体积；
- 分包大图放到分包images，减小主包体积防止超出2M限制。
常见报错：图片找不到
- 路径少写
/：images/xxx改为/images/xxx； - 层级错误：pages深层页面用相对路径
../../回溯； - 分包跨包读取图片：禁止，会空白；
- 后缀大小写：
PNG和png真机区分大小写。