更新记录

0.1.12（2026-08-18） 下载此版本

  • 修复模板条件编译注释位于标签属性区被解析为属性的隐患：webp / draggable / show-menu-by-longpress 改为条件编译双分支渲染（注释移至标签外），消除非蒸汽端 "Property '

0.1.9（2026-08-14） 下载此版本

  • readme 合并重复的“主题”小节为一张 Token 表

0.1.7（2026-08-07） 下载此版本

  • 支持 iOS 端：走 #ifndef APP-HARMONY 公共分支，无额外端差异代码，iOS 直接可用
查看更多

平台兼容性

uni-app x(4.25)

Chrome Safari Android iOS 鸿蒙 微信小程序
√ √ √ √ √ √

其他

多语言 暗黑模式 宽屏模式
× √ ×

nax-image

nax-ui 图片组件（uni-app x / uvue）。

基于原生 image 封装，提供统一尺寸/圆角 API，以及加载中与加载失败占位。

安装

uni_modules/nax-image

依赖：

uni_modules/nax-icon

easycom 自动生效。

推荐同时安装主题包

uni_modules/nax-ui-theme

并在 App.uvue 引入：

@import "@/uni_modules/nax-ui-theme/theme/default.css";

页面根节点加 class="nax-theme"。

主题

通过 CSS 变量覆盖：

Token 用途
--nax-color-bg-secondary 次级背景色
--nax-color-text-placeholder 占位文字色
--nax-color-text-secondary 次要文字色
--nax-image-bg 容器背景
--nax-image-status-bg 占位层背景
--nax-image-radius 图片圆角（shape=round 时，默认跟 --nax-radius-md / 3px，对齐 button）

依赖

依赖 说明
nax-icon 图标（loading 等）
nax-ui-theme 安装时依赖；运行时弱依赖（组件内 var(--nax-*, fallback)，未接主题也能显示）

安装 theme 后仍需：App.uvue @import + 应用 layout/页面 一处 class="nax-theme"。详见 uni_modules/nax-ui-theme/readme.md（L0/L1/L2）。

基础用法

<nax-image
  src="https://example.com/a.jpg"
  width="120"
  height="120"
  shape="round"
></nax-image>

加载 / 失败占位

默认开启 showLoading / showError。可用插槽自定义：

<nax-image src="https://example.com/a.jpg" width="160" height="120">
  <template #loading>
    <text>加载中…</text>
  </template>
  <template #error>
    <text>图片走丢了</text>
  </template>
</nax-image>

懒加载

<nax-image
  src="https://example.com/a.jpg"
  lazy-load
  width="100%"
  height="180"
></nax-image>

Props

属性 类型 默认值 说明
src string '' 图片地址
mode string aspectFill 同原生 image mode
width string 100% 宽度；纯数字按 px
height string 200 高度；纯数字按 px
shape string square square / round / circle
lazyLoad boolean false 懒加载
fadeShow boolean true 加载完成淡入（按端支持）
webp boolean false 是否解析 webp（按端支持）
draggable boolean true 是否可拖拽（Web）
showMenuByLongpress boolean false 长按菜单（小程序）
showLoading boolean true 展示加载占位
showError boolean true 展示失败占位
loadingText string '' 加载文案
errorText string 加载失败 失败文案
customClass string '' 根节点扩展 class

Events

事件 说明
load 加载成功（透传原生事件）
error 加载失败（透传原生事件）
click 点击

Slots

插槽 说明
default 覆盖在图片上的内容
loading 自定义加载占位
error 自定义失败占位

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。