n-image 图片
页面与列表里的图片展示：矩形 / 圆形画布 + 加载中 / 失败占位 + 点击全屏预览 + 默认插槽叠放（水印、角标、徽标）。
- 画布几何：
width缺省铺满父容器；height缺省时widthFix模式高随原图比例（长图文零成本），其余模式取 240px（与原生 image 默认尺寸语义一致）- 加载中 / 失败 / 空 src 自动显示占位层（底色 + 加载圈 / 失败图标），
show-loading/show-error可单独关闭；占位内容可用loading/error插槽整体替换，bg-color换底色- 点击预览：
preview开启后调用系统全屏预览；多图传preview-list，preview-index指定起始下标（App 端只支持下标定位）；加载中 / 失败态点击不触发预览，click事件照常派发mode为 image 原生裁剪模式全集（14 种），默认aspectFill短边铺满居中裁剪不变形；widthFix长图文宽不变高自适应，heightFix宽按原图比例（画布左对齐）- 形状
shape="circle"全圆裁图（方形画布即圆形头像位），个别圆角用radius（支持"50%"）覆盖；border在同色背景上勾出图片边界- 原生能力透传：
lazy-load懒加载（page / scroll-view 下有效）、fade-show淡入；webp解码与show-menu-by-longpress长按菜单仅微信端有行为（其余端原生 image 无此属性）
平台兼容性
| App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | QQ小程序 |
|---|---|---|---|---|---|---|
| √ | √ | √ | × | × | × | × |
API
属性
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| src | 图片地址（网络 / 本地 / 临时路径）；空串不加载，显示空画布（占位底色） | String | "" | - |
| mode | 裁剪缩放模式（image 原生 mode）：aspectFill 短边铺满居中裁剪不变形、aspectFit 完整显示留白、scaleToFill 拉伸铺满、widthFix 宽不变高按原图比例自适应（长图文） | String | aspectFill | scaleToFill<br/>aspectFit<br/>aspectFill<br/>widthFix<br/>heightFix<br/>top<br/>bottom<br/>center<br/>left<br/>right<br/>top left<br/>top right<br/>bottom left<br/>bottom right |
| width | 画布宽度：数值 px 或任意 css 长度（"100%" / "300px"）；空 = 铺满父容器 | String / Number | "" | 与 css 相同 |
| height | 画布高度：数值 px 或任意 css 长度；空 = widthFix 模式高随原图比例，其余模式取 240px（与原生 image 默认一致） | String / Number | "" | 与 css 相同 |
| radius | 圆角：数值 px 或任意 css 长度（"50%"）；非空时覆盖 shape 的圆角 | String / Number | "" | 与 css 相同 |
| shape | 形状：square 直角 / circle 全圆裁图（配合方形画布做圆形头像位、圆形徽章图） | String | square | square<br/>circle |
| bg-color | 加载中 / 失败 / 空 src 时占位层的底色；空 = 次级表面色（随深浅主题） | String | "" | 与 css 相同 |
| border | 是否显示描边（浅色图放在同色背景上时勾出边界） | Boolean | false | - |
| show-loading | 加载中是否显示占位层（默认加载圈，可用 loading 插槽替换；关闭后加载中只显示底色） | Boolean | true | - |
| show-error | 加载失败是否显示占位层（默认失败图标，可用 error 插槽替换；关闭后失败只显示底色） | Boolean | true | - |
| error-icon | 失败占位图标名（n-icon 名称表）；传空串 = 失败态不放图标只留底色 | String | image | n-icon 名称表 |
| preview | 点击图片时调用系统全屏预览（uni.previewImage）：预览列表为 previewList（空则单图 src）；微信端预览接口只收 http 链接，预览图请用网络路径 | Boolean | false | - |
| preview-list | 全屏预览的图片列表；空 = 只预览当前 src 一张。微信端需为网络路径（小程序预览接口不支持代码包内路径），App / Web 端本地路径可用 | Array | [] | - |
| preview-index | 全屏预览的起始下标（previewList 非空时生效；App 端只支持下标定位） | Number | 0 | - |
| lazy-load | 原生懒加载：仅 page 与 scroll-view 下的 image 有效 | Boolean | false | - |
| fade-show | 图片加载完成后淡入显示（原生能力） | Boolean | false | - |
| webp | 是否启用 webP 格式解码（微信端生效） | Boolean | true | - |
| show-menu-by-longpress | 长按图片显示识别菜单（保存 / 识别小程序码，微信端生效） | Boolean | false | - |
| name | 业务标识：click 事件原样回传，列表代理处理点击时区分来源 | String | "" | - |
| custom-class | 挂到根节点的额外 class（类需定义在组件样式表内） | String | "" | - |
| custom-style | 根节点行内样式，如 "margin-right:10px" 用于和相邻元素排间距 | String | "" | 与 css 相同 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击图片时触发（加载中 / 失败态也触发） | name（业务标识原样回传） |
| load | 图片加载成功时触发 | 原生加载事件（detail 含 width / height，单位 px） |
| error | 图片加载失败时触发 | 原生错误事件（detail 含 errMsg） |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 叠放在图片上方的覆盖层（水印、角标、徽标），铺满画布、随圆角一起被裁剪；内容自行绝对定位 |
| loading | 替换加载中占位内容（默认加载圈） |
| error | 替换加载失败占位内容（默认失败图标） |