From f393dd19be01a8260178666a1f66bb9d921bbc7d Mon Sep 17 00:00:00 2001
From: skiyee <319619193@qq.com>
Date: Wed, 22 Oct 2025 16:17:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(image):=20=E5=AE=9E=E7=8E=B0=20Image=20?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/uni/src/pages-basic/image/base.vue   |  53 ++++
 examples/uni/src/pages-basic/image/error.vue  | 119 +++++++
 examples/uni/src/pages-basic/image/lazy.vue   |  46 +++
 examples/uni/src/pages-basic/image/mode.vue   | 107 +++++++
 .../uni/src/pages-basic/image/placeholder.vue |  94 ++++++
 .../uni/src/pages-basic/image/preview.vue     | 139 ++++++++
 examples/uni/src/pages-basic/image/radius.vue | 103 ++++++
 examples/uni/src/pages.json                   |  28 ++
 examples/uni/types/components.d.ts            |  22 +-
 examples/uni/types/pages.d.ts                 |   7 +
 .../skiyee-uni-ui/src/components/sk-image.vue | 296 ++++++++++++++++++
 packages/skiyee-uni-ui/src/styles/index.ts    |   5 +-
 packages/skiyee-uni-ui/src/styles/sk-image.ts |  36 +++
 packages/skiyee-uni-ui/src/types/common.ts    |  25 ++
 packages/skiyee-uni-ui/src/utils/format.ts    |   2 +-
 15 files changed, 1059 insertions(+), 23 deletions(-)
 create mode 100644 examples/uni/src/pages-basic/image/base.vue
 create mode 100644 examples/uni/src/pages-basic/image/error.vue
 create mode 100644 examples/uni/src/pages-basic/image/lazy.vue
 create mode 100644 examples/uni/src/pages-basic/image/mode.vue
 create mode 100644 examples/uni/src/pages-basic/image/placeholder.vue
 create mode 100644 examples/uni/src/pages-basic/image/preview.vue
 create mode 100644 examples/uni/src/pages-basic/image/radius.vue
 create mode 100644 packages/skiyee-uni-ui/src/components/sk-image.vue
 create mode 100644 packages/skiyee-uni-ui/src/styles/sk-image.ts

diff --git a/examples/uni/src/pages-basic/image/base.vue b/examples/uni/src/pages-basic/image/base.vue
new file mode 100644
index 0000000..0973f39
--- /dev/null
+++ b/examples/uni/src/pages-basic/image/base.vue
@@ -0,0 +1,53 @@
+<template>
+  <view class="p-4 w-full">
+    <view class="space-y-4">
+      <!-- 基础用法 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          基础用法
+        </text>
+        <SkImage
+          src="https://picsum.photos/200/200"
+          width="200rpx"
+          height="200rpx"
+        />
+      </view>
+
+      <!-- 指定尺寸 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          指定尺寸
+        </text>
+        <view class="flex gap-4">
+          <SkImage
+            src="https://picsum.photos/100/100"
+            width="100rpx"
+            height="100rpx"
+          />
+          <SkImage
+            src="https://picsum.photos/150/150"
+            width="150rpx"
+            height="150rpx"
+          />
+          <SkImage
+            src="https://picsum.photos/200/200"
+            width="200rpx"
+            height="200rpx"
+          />
+        </view>
+      </view>
+
+      <!-- 全宽图片 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          全宽图片
+        </text>
+        <SkImage
+          src="https://picsum.photos/800/400"
+          width="100%"
+          height="400rpx"
+        />
+      </view>
+    </view>
+  </view>
+</template>
diff --git a/examples/uni/src/pages-basic/image/error.vue b/examples/uni/src/pages-basic/image/error.vue
new file mode 100644
index 0000000..5ebaf96
--- /dev/null
+++ b/examples/uni/src/pages-basic/image/error.vue
@@ -0,0 +1,119 @@
+<template>
+  <view class="p-4 w-full">
+    <view class="space-y-4">
+      <!-- 默认错误提示 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          默认错误提示
+        </text>
+        <text class="text-caption text-neutral-600">
+          图片加载失败时显示默认错误提示
+        </text>
+        <SkImage
+          src="https://invalid-url.com/image.jpg"
+          width="200rpx"
+          height="200rpx"
+          radius="medium"
+        />
+      </view>
+
+      <!-- 自定义错误图 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          自定义错误图
+        </text>
+        <text class="text-caption text-neutral-600">
+          使用自定义图片作为错误状态
+        </text>
+        <SkImage
+          src="https://invalid-url.com/image.jpg"
+          width="200rpx"
+          height="200rpx"
+          radius="medium"
+          error-image="https://via.placeholder.com/200x200/ffebee/c62828?text=Error"
+        />
+      </view>
+
+      <!-- 自定义错误插槽 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          自定义错误插槽
+        </text>
+        <text class="text-caption text-neutral-600">
+          使用插槽自定义错误状态显示
+        </text>
+        <SkImage
+          src="https://invalid-url.com/image.jpg"
+          width="200rpx"
+          height="200rpx"
+          radius="medium"
+        >
+          <template #error>
+            <view class="w-full h-full flex-center flex-col gap-2 bg-danger/10">
+              <text class="text-danger text-2xl">
+                ❌
+              </text>
+              <text class="text-caption text-danger">
+                加载失败
+              </text>
+            </view>
+          </template>
+        </SkImage>
+      </view>
+
+      <!-- 隐藏错误提示 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          隐藏错误提示
+        </text>
+        <text class="text-caption text-neutral-600">
+          设置 isShowError 为 false 隐藏错误提示
+        </text>
+        <SkImage
+          src="https://invalid-url.com/image.jpg"
+          width="200rpx"
+          height="200rpx"
+          radius="medium"
+          :is-show-error="false"
+        />
+      </view>
+
+      <!-- 错误图片列表 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          错误图片列表
+        </text>
+        <text class="text-caption text-neutral-600">
+          批量显示带错误处理的图片
+        </text>
+        <view class="grid grid-cols-3 gap-4">
+          <SkImage
+            v-for="i in 6"
+            :key="i"
+            :src="`https://invalid-url.com/image${i}.jpg`"
+            width="100%"
+            height="150rpx"
+            radius="small"
+            error-image="https://via.placeholder.com/150x150/f5f5f5/999999?text=Error"
+          />
+        </view>
+      </view>
+
+      <!-- 空 src -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          空 src
+        </text>
+        <text class="text-caption text-neutral-600">
+          未提供图片地址时的错误状态
+        </text>
+        <SkImage
+          src=""
+          width="200rpx"
+          height="200rpx"
+          radius="medium"
+        />
+      </view>
+    </view>
+  </view>
+</template>
diff --git a/examples/uni/src/pages-basic/image/lazy.vue b/examples/uni/src/pages-basic/image/lazy.vue
new file mode 100644
index 0000000..288592c
--- /dev/null
+++ b/examples/uni/src/pages-basic/image/lazy.vue
@@ -0,0 +1,46 @@
+<template>
+  <view class="p-4 w-full">
+    <view class="space-y-4">
+      <!-- 说明 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          懒加载示例
+        </text>
+        <text class="text-caption text-neutral-600">
+          滚动页面查看图片懒加载效果，图片进入可视区域时才会加载
+        </text>
+      </view>
+
+      <!-- 普通加载 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          普通加载
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/300?random=1"
+          width="100%"
+          height="300rpx"
+          radius="medium"
+        />
+      </view>
+
+      <!-- 懒加载图片列表 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          懒加载图片列表
+        </text>
+        <view class="space-y-4">
+          <SkImage
+            v-for="i in 10"
+            :key="i"
+            :src="`https://picsum.photos/400/300?random=${i + 1}`"
+            width="100%"
+            height="300rpx"
+            radius="medium"
+            :is-lazy="true"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
diff --git a/examples/uni/src/pages-basic/image/mode.vue b/examples/uni/src/pages-basic/image/mode.vue
new file mode 100644
index 0000000..d028638
--- /dev/null
+++ b/examples/uni/src/pages-basic/image/mode.vue
@@ -0,0 +1,107 @@
+<template>
+  <view class="p-4 w-full">
+    <view class="space-y-4">
+      <!-- scaleToFill -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          scaleToFill - 不保持纵横比缩放
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/200"
+          mode="scaleToFill"
+          width="200rpx"
+          height="200rpx"
+        />
+      </view>
+
+      <!-- aspectFit -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          aspectFit - 保持纵横比，长边完整显示
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/200"
+          mode="aspectFit"
+          width="200rpx"
+          height="200rpx"
+        />
+      </view>
+
+      <!-- aspectFill -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          aspectFill - 保持纵横比，短边完整显示
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/200"
+          mode="aspectFill"
+          width="200rpx"
+          height="200rpx"
+        />
+      </view>
+
+      <!-- widthFix -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          widthFix - 宽度不变，高度自动变化
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/200"
+          mode="widthFix"
+          width="200rpx"
+        />
+      </view>
+
+      <!-- heightFix -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          heightFix - 高度不变，宽度自动变化
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/200"
+          mode="heightFix"
+          height="200rpx"
+        />
+      </view>
+
+      <!-- top -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          top - 不缩放，显示顶部区域
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/400"
+          mode="top"
+          width="200rpx"
+          height="200rpx"
+        />
+      </view>
+
+      <!-- center -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          center - 不缩放，显示中间区域
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/400"
+          mode="center"
+          width="200rpx"
+          height="200rpx"
+        />
+      </view>
+
+      <!-- bottom -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          bottom - 不缩放，显示底部区域
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/400"
+          mode="bottom"
+          width="200rpx"
+          height="200rpx"
+        />
+      </view>
+    </view>
+  </view>
+</template>
diff --git a/examples/uni/src/pages-basic/image/placeholder.vue b/examples/uni/src/pages-basic/image/placeholder.vue
new file mode 100644
index 0000000..17f4375
--- /dev/null
+++ b/examples/uni/src/pages-basic/image/placeholder.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const imageUrl = ref('')
+const showImage = ref(false)
+
+// 模拟延迟加载
+function loadImage() {
+  showImage.value = true
+  setTimeout(() => {
+    imageUrl.value = 'https://picsum.photos/400/300'
+  }, 2000)
+}
+</script>
+
+<template>
+  <view class="p-4 w-full">
+    <view class="space-y-4">
+      <!-- 默认占位图 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          默认占位图
+        </text>
+        <text class="text-caption text-neutral-600">
+          图片加载时显示占位图
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/300?random=1"
+          width="100%"
+          height="300rpx"
+          radius="medium"
+          placeholder="https://via.placeholder.com/400x300/cccccc/666666?text=Loading..."
+        />
+      </view>
+
+      <!-- 自定义占位图 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          自定义占位图
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/300?random=2"
+          width="100%"
+          height="300rpx"
+          radius="medium"
+          placeholder="https://via.placeholder.com/400x300/e3f2fd/1976d2?text=Custom+Placeholder"
+        />
+      </view>
+
+      <!-- 模拟慢速加载 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          模拟慢速加载
+        </text>
+        <text class="text-caption text-neutral-600">
+          点击按钮后 2 秒后加载图片
+        </text>
+        <button
+          v-if="!showImage"
+          class="bg-brand text-brand-foreground px-4 py-2 rounded"
+          @click="loadImage"
+        >
+          加载图片
+        </button>
+        <SkImage
+          v-if="showImage"
+          :src="imageUrl"
+          width="100%"
+          height="300rpx"
+          radius="medium"
+          placeholder="https://via.placeholder.com/400x300/fff3e0/f57c00?text=Loading+2s..."
+        />
+      </view>
+
+      <!-- 带占位图的图片网格 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          图片网格
+        </text>
+        <view class="grid grid-cols-2 gap-4">
+          <SkImage
+            v-for="i in 4"
+            :key="i"
+            :src="`https://picsum.photos/200/200?random=${i + 10}`"
+            width="100%"
+            height="200rpx"
+            radius="medium"
+            placeholder="https://via.placeholder.com/200x200/f5f5f5/999999?text=..."
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
diff --git a/examples/uni/src/pages-basic/image/preview.vue b/examples/uni/src/pages-basic/image/preview.vue
new file mode 100644
index 0000000..e67b5e7
--- /dev/null
+++ b/examples/uni/src/pages-basic/image/preview.vue
@@ -0,0 +1,139 @@
+<template>
+  <view class="p-4 w-full">
+    <view class="space-y-4">
+      <!-- 单图预览 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          单图预览
+        </text>
+        <text class="text-caption text-neutral-600">
+          点击图片可放大预览
+        </text>
+        <SkImage
+          src="https://picsum.photos/800/600?random=1"
+          width="100%"
+          height="300rpx"
+          radius="medium"
+          :is-preview="true"
+        />
+      </view>
+
+      <!-- 多图预览 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          多图预览
+        </text>
+        <text class="text-caption text-neutral-600">
+          点击任意图片，可左右滑动查看其他图片
+        </text>
+        <view class="grid grid-cols-3 gap-4">
+          <SkImage
+            v-for="i in 6"
+            :key="i"
+            :src="`https://picsum.photos/400/400?random=${i + 10}`"
+            width="100%"
+            height="150rpx"
+            radius="small"
+            :is-preview="true"
+            :preview-src-list="[
+              'https://picsum.photos/400/400?random=11',
+              'https://picsum.photos/400/400?random=12',
+              'https://picsum.photos/400/400?random=13',
+              'https://picsum.photos/400/400?random=14',
+              'https://picsum.photos/400/400?random=15',
+              'https://picsum.photos/400/400?random=16',
+            ]"
+          />
+        </view>
+      </view>
+
+      <!-- 圆形头像预览 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          圆形头像预览
+        </text>
+        <text class="text-caption text-neutral-600">
+          点击头像可预览大图
+        </text>
+        <view class="flex gap-4">
+          <SkImage
+            v-for="i in 4"
+            :key="i"
+            :src="`https://picsum.photos/200/200?random=${i + 20}`"
+            width="100rpx"
+            height="100rpx"
+            radius="full"
+            :is-preview="true"
+            :preview-src-list="[
+              'https://picsum.photos/200/200?random=21',
+              'https://picsum.photos/200/200?random=22',
+              'https://picsum.photos/200/200?random=23',
+              'https://picsum.photos/200/200?random=24',
+            ]"
+          />
+        </view>
+      </view>
+
+      <!-- 商品图预览 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          商品图预览
+        </text>
+        <text class="text-caption text-neutral-600">
+          模拟商品详情页的图片预览功能
+        </text>
+        <view class="space-y-4">
+          <!-- 主图 -->
+          <SkImage
+            src="https://picsum.photos/800/800?random=30"
+            width="100%"
+            height="500rpx"
+            radius="medium"
+            :is-preview="true"
+            :preview-src-list="[
+              'https://picsum.photos/800/800?random=30',
+              'https://picsum.photos/800/800?random=31',
+              'https://picsum.photos/800/800?random=32',
+              'https://picsum.photos/800/800?random=33',
+            ]"
+          />
+          <!-- 缩略图 -->
+          <view class="flex gap-2">
+            <SkImage
+              v-for="i in 4"
+              :key="i"
+              :src="`https://picsum.photos/800/800?random=${29 + i}`"
+              width="120rpx"
+              height="120rpx"
+              radius="small"
+              :is-preview="true"
+              :preview-src-list="[
+                'https://picsum.photos/800/800?random=30',
+                'https://picsum.photos/800/800?random=31',
+                'https://picsum.photos/800/800?random=32',
+                'https://picsum.photos/800/800?random=33',
+              ]"
+            />
+          </view>
+        </view>
+      </view>
+
+      <!-- 禁用预览 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          禁用预览
+        </text>
+        <text class="text-caption text-neutral-600">
+          isPreview 为 false 时，点击图片无反应
+        </text>
+        <SkImage
+          src="https://picsum.photos/400/300?random=40"
+          width="100%"
+          height="300rpx"
+          radius="medium"
+          :is-preview="false"
+        />
+      </view>
+    </view>
+  </view>
+</template>
diff --git a/examples/uni/src/pages-basic/image/radius.vue b/examples/uni/src/pages-basic/image/radius.vue
new file mode 100644
index 0000000..7bcf81d
--- /dev/null
+++ b/examples/uni/src/pages-basic/image/radius.vue
@@ -0,0 +1,103 @@
+<template>
+  <view class="p-4 w-full">
+    <view class="space-y-4">
+      <!-- 无圆角 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          none - 无圆角
+        </text>
+        <SkImage
+          src="https://picsum.photos/200/200"
+          width="200rpx"
+          height="200rpx"
+          radius="none"
+        />
+      </view>
+
+      <!-- 小圆角 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          small - 小圆角
+        </text>
+        <SkImage
+          src="https://picsum.photos/200/200"
+          width="200rpx"
+          height="200rpx"
+          radius="small"
+        />
+      </view>
+
+      <!-- 中等圆角 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          medium - 中等圆角
+        </text>
+        <SkImage
+          src="https://picsum.photos/200/200"
+          width="200rpx"
+          height="200rpx"
+          radius="medium"
+        />
+      </view>
+
+      <!-- 大圆角 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          large - 大圆角
+        </text>
+        <SkImage
+          src="https://picsum.photos/200/200"
+          width="200rpx"
+          height="200rpx"
+          radius="large"
+        />
+      </view>
+
+      <!-- 圆形 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          full - 圆形
+        </text>
+        <SkImage
+          src="https://picsum.photos/200/200"
+          width="200rpx"
+          height="200rpx"
+          radius="full"
+        />
+      </view>
+
+      <!-- 多个圆形图片组合 -->
+      <view class="space-y-2">
+        <text class="text-body-medium font-medium">
+          圆形头像组合
+        </text>
+        <view class="flex gap-4">
+          <SkImage
+            src="https://picsum.photos/100/100?random=1"
+            width="80rpx"
+            height="80rpx"
+            radius="full"
+          />
+          <SkImage
+            src="https://picsum.photos/100/100?random=2"
+            width="80rpx"
+            height="80rpx"
+            radius="full"
+          />
+          <SkImage
+            src="https://picsum.photos/100/100?random=3"
+            width="80rpx"
+            height="80rpx"
+            radius="full"
+          />
+          <SkImage
+            src="https://picsum.photos/100/100?random=4"
+            width="80rpx"
+            height="80rpx"
+            radius="full"
+          />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
diff --git a/examples/uni/src/pages.json b/examples/uni/src/pages.json
index bb82f30..a8e9279 100644
--- a/examples/uni/src/pages.json
+++ b/examples/uni/src/pages.json
@@ -123,6 +123,34 @@
           "path": "icon/size",
           "type": "page"
         },
+        {
+          "path": "image/base",
+          "type": "page"
+        },
+        {
+          "path": "image/error",
+          "type": "page"
+        },
+        {
+          "path": "image/lazy",
+          "type": "page"
+        },
+        {
+          "path": "image/mode",
+          "type": "page"
+        },
+        {
+          "path": "image/placeholder",
+          "type": "page"
+        },
+        {
+          "path": "image/preview",
+          "type": "page"
+        },
+        {
+          "path": "image/radius",
+          "type": "page"
+        },
         {
           "path": "overlay/animation",
           "type": "page"
diff --git a/examples/uni/types/components.d.ts b/examples/uni/types/components.d.ts
index 9a8dd13..c756799 100644
--- a/examples/uni/types/components.d.ts
+++ b/examples/uni/types/components.d.ts
@@ -7,26 +7,6 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    SkBadge: typeof import('@skiyee/uni-ui/components/sk-badge.vue')['default']
-    SkButton: typeof import('@skiyee/uni-ui/components/sk-button.vue')['default']
-    SkCheckbox: typeof import('@skiyee/uni-ui/components/sk-checkbox.vue')['default']
-    SkCheckboxGroup: typeof import('@skiyee/uni-ui/components/sk-checkbox-group.vue')['default']
-    SkDialog: typeof import('@skiyee/uni-ui/components/sk-dialog.vue')['default']
-    SkField: typeof import('@skiyee/uni-ui/components/sk-field.vue')['default']
-    SkForm: typeof import('@skiyee/uni-ui/components/sk-form.vue')['default']
-    SkIcon: typeof import('@skiyee/uni-ui/components/sk-icon.vue')['default']
-    SkInput: typeof import('@skiyee/uni-ui/components/sk-input.vue')['default']
-    SkNumberInput: typeof import('@skiyee/uni-ui/components/sk-number-input.vue')['default']
-    SkOverlay: typeof import('@skiyee/uni-ui/components/sk-overlay.vue')['default']
-    SkPicker: typeof import('@skiyee/uni-ui/components/sk-picker.vue')['default']
-    SkRadio: typeof import('@skiyee/uni-ui/components/sk-radio.vue')['default']
-    SkRadioGroup: typeof import('@skiyee/uni-ui/components/sk-radio-group.vue')['default']
-    SkRoller: typeof import('@skiyee/uni-ui/components/sk-roller.vue')['default']
-    SkRollerGroup: typeof import('@skiyee/uni-ui/components/sk-roller-group.vue')['default']
-    SkSlider: typeof import('@skiyee/uni-ui/components/sk-slider.vue')['default']
-    SkSpinner: typeof import('@skiyee/uni-ui/components/sk-spinner.vue')['default']
-    SkSwitch: typeof import('@skiyee/uni-ui/components/sk-switch.vue')['default']
-    SkTextarea: typeof import('@skiyee/uni-ui/components/sk-textarea.vue')['default']
-    SkToast: typeof import('@skiyee/uni-ui/components/sk-toast.vue')['default']
+    SkImage: typeof import('@skiyee/uni-ui/components/sk-image.vue')['default']
   }
 }
diff --git a/examples/uni/types/pages.d.ts b/examples/uni/types/pages.d.ts
index 8cb447c..289d9e0 100644
--- a/examples/uni/types/pages.d.ts
+++ b/examples/uni/types/pages.d.ts
@@ -31,6 +31,13 @@ interface NavigateToOptions {
        "/pages-basic/icon/color" |
        "/pages-basic/icon/name" |
        "/pages-basic/icon/size" |
+       "/pages-basic/image/base" |
+       "/pages-basic/image/error" |
+       "/pages-basic/image/lazy" |
+       "/pages-basic/image/mode" |
+       "/pages-basic/image/placeholder" |
+       "/pages-basic/image/preview" |
+       "/pages-basic/image/radius" |
        "/pages-basic/overlay/animation" |
        "/pages-basic/overlay/backdrop" |
        "/pages-basic/overlay/base" |
diff --git a/packages/skiyee-uni-ui/src/components/sk-image.vue b/packages/skiyee-uni-ui/src/components/sk-image.vue
new file mode 100644
index 0000000..4f33167
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/components/sk-image.vue
@@ -0,0 +1,296 @@
+<script lang="ts">
+/**
+ * sk-image 组件 - 增强型图片组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```vue
+ * <sk-image
+ *   src="https://example.com/image.jpg"
+ *   mode="aspectFill"
+ *   width="200rpx"
+ *   height="200rpx"
+ *   radius="medium"
+ *   :lazy="true"
+ *   :preview="true"
+ * />
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/basic/image
+ */
+
+import type { SkImageUcvProps } from '../styles'
+import type { ImageMode, RadiusSize } from '../types'
+
+export interface SkImageProps {
+  /**
+   * 图片地址
+   */
+  src: string;
+  /**
+   * 图片裁剪/缩放模式
+   * @default 'aspectFill'
+   */
+  mode?: ImageMode;
+  /**
+   * 图片宽度 (支持 rpx、px、百分比)
+   */
+  width?: string | number;
+  /**
+   * 图片高度 (支持 rpx、px、百分比)
+   */
+  height?: string | number;
+  /**
+   * 圆角大小
+   * @default 'none'
+   */
+  radius?: SkImageUcvProps['radius'];
+  /**
+   * 是否懒加载
+   * @default false
+   */
+  isLazy?: boolean;
+  /**
+   * 占位图地址
+   */
+  placeholder?: string;
+  /**
+   * 错误图地址
+   */
+  errorImage?: string;
+  /**
+   * 是否显示加载状态
+   * @default true
+   */
+  isShowLoading?: boolean;
+  /**
+   * 是否显示错误状态
+   * @default true
+   */
+  isShowError?: boolean;
+  /**
+   * 是否启用淡入动画
+   * @default true
+   */
+  isFade?: boolean;
+  /**
+   * 是否支持点击预览
+   * @default false
+   */
+  isPreview?: boolean;
+  /**
+   * 预览图片列表 (preview=true 时使用)
+   */
+  previewSrcList?: string[];
+  /**
+   * 用于拓展当前基础样式
+   */
+  clax?: SkImageUcvProps['clax'];
+}
+
+export interface SkImageEmits {
+  /**
+   * 图片加载完成事件
+   * @param event 加载事件对象
+   */
+  (name: 'load', event: any): void;
+  /**
+   * 图片加载失败事件
+   * @param event 错误事件对象
+   */
+  (name: 'error', event: any): void;
+  /**
+   * 点击图片事件
+   */
+  (name: 'click'): void;
+}
+
+export interface SkImageSlots {
+  /**
+   * 自定义加载状态
+   */
+  loading?: () => any;
+  /**
+   * 自定义错误状态
+   */
+  error?: () => any;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+import { SkImageUcv } from '../styles'
+import { formatSize } from '../utils'
+
+defineOptions({
+  inheritAttrs: false,
+  options: {
+    virtualHost: true,
+  },
+})
+
+const props = withDefaults(defineProps<SkImageProps>(), {
+  mode: 'aspectFill',
+  radius: 'none',
+  isLazy: false,
+  isShowLoading: true,
+  isShowError: true,
+  isFade: true,
+  isPreview: false,
+})
+
+const emits = defineEmits<SkImageEmits>()
+
+defineSlots<SkImageSlots>()
+
+// 状态管理
+const loading = ref(true)
+const error = ref(false)
+const imageLoaded = ref(false)
+
+// 计算样式
+const containerStyle = computed(() => {
+  const styles: Record<string, string> = {}
+
+  if (props.width) {
+    styles.width = formatSize(props.width)
+  }
+
+  if (props.height) {
+    styles.height = formatSize(props.height)
+  }
+
+  return styles
+})
+
+const classes = computed(() => {
+  return SkImageUcv({
+    radius: props.radius,
+    clax: props.clax,
+  })
+})
+
+// 图片样式 - 处理淡入动画
+const imageStyle = computed(() => {
+  const styles: Record<string, string> = {
+    width: '100%',
+    height: '100%',
+  }
+
+  // 淡入动画
+  if (props.isFade && imageLoaded.value) {
+    styles.opacity = '1'
+    styles.transition = 'opacity 0.3s ease-in-out'
+  }
+  else if (props.isFade) {
+    styles.opacity = '0'
+  }
+
+  return styles
+})
+
+// 图片加载完成
+function handleLoad(event: any) {
+  loading.value = false
+  error.value = false
+  imageLoaded.value = true
+  emits('load', event)
+}
+
+// 图片加载失败
+function handleError(event: any) {
+  loading.value = false
+  error.value = true
+  emits('error', event)
+}
+
+// 点击图片
+function handleClick() {
+  emits('click')
+
+  if (props.isPreview && !error.value) {
+    const urls = props.previewSrcList || [props.src]
+    const current = props.previewSrcList ? props.previewSrcList.indexOf(props.src) : 0
+
+    uni.previewImage({
+      current: current >= 0 ? current : 0,
+      urls,
+    })
+  }
+}
+
+// 初始化
+onMounted(() => {
+  // 如果没有 src，直接设置为错误状态
+  if (!props.src) {
+    loading.value = false
+    error.value = true
+  }
+})
+</script>
+
+<template>
+  <view
+    :class="classes"
+    :style="containerStyle"
+    @click="handleClick"
+  >
+    <!-- 加载中状态 -->
+    <view
+      v-if="loading && isShowLoading && !error"
+      class="sk-image__loading"
+    >
+      <slot name="loading">
+        <view class="sk-image__loading-content">
+          <text class="sk-image__loading-text">
+            加载中...
+          </text>
+        </view>
+      </slot>
+    </view>
+
+    <!-- 错误状态 -->
+    <view
+      v-if="error && isShowError"
+      class="sk-image__error"
+    >
+      <slot name="error">
+        <image
+          v-if="errorImage"
+          :src="errorImage"
+          mode="aspectFit"
+          class="sk-image__error-img"
+        />
+        <view v-else class="sk-image__error-content">
+          <text class="sk-image__error-text">
+            加载失败
+          </text>
+        </view>
+      </slot>
+    </view>
+
+    <!-- 占位图 -->
+    <image
+      v-if="placeholder && loading && !error"
+      :src="placeholder"
+      :mode="mode"
+      class="sk-image__placeholder"
+    />
+
+    <!-- 实际图片 -->
+    <image
+      v-if="src && !error"
+      :src="src"
+      :mode="mode"
+      :lazy-load="isLazy"
+      :style="imageStyle"
+      class="sk-image__img"
+      @load="handleLoad"
+      @error="handleError"
+    />
+  </view>
+</template>
diff --git a/packages/skiyee-uni-ui/src/styles/index.ts b/packages/skiyee-uni-ui/src/styles/index.ts
index cd3dee8..7495dd2 100644
--- a/packages/skiyee-uni-ui/src/styles/index.ts
+++ b/packages/skiyee-uni-ui/src/styles/index.ts
@@ -24,6 +24,9 @@ export { SkDialogUcv } from './sk-dialog'
 export type { SkFieldUcvProps } from './sk-field'
 export { SkFieldUcv } from './sk-field'
 
+export type { SkImageUcvProps } from './sk-image'
+export { SkImageUcv } from './sk-image'
+
 export type { SkInputUcvProps } from './sk-input'
 export { SkInputUcv } from './sk-input'
 
@@ -55,7 +58,7 @@ export type { SkSwitchUcvProps } from './sk-switch'
 export { SkSwitchUcv } from './sk-switch'
 
 export type { SkTextareaUcvProps } from './sk-textarea'
-export { SkTextareaUcv } from './sk-textarea'
 
+export { SkTextareaUcv } from './sk-textarea'
 export type { SkToastUcvProps } from './sk-toast'
 export { SkToastUcv } from './sk-toast'
diff --git a/packages/skiyee-uni-ui/src/styles/sk-image.ts b/packages/skiyee-uni-ui/src/styles/sk-image.ts
new file mode 100644
index 0000000..d844ba7
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/styles/sk-image.ts
@@ -0,0 +1,36 @@
+// @unocss-include
+/**
+ * sk-image 由 @skiyee/ucv 生成的样式组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```ts
+ * const classes = SkImageUcv(props)
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/basic/image
+ */
+import type { InferProps } from '@skiyee/ucv'
+
+import { ucv } from '@skiyee/ucv'
+
+export const SkImageUcv = ucv({
+  element: 'sk-image:(relative inline-block overflow-hidden bg-neutral-100)',
+  variants: {
+    radius: {
+      none: '',
+      small: 'rounded-small',
+      medium: 'rounded-medium',
+      large: 'rounded-large',
+      full: 'rounded-full',
+    },
+  },
+  defaults: {
+    radius: 'none',
+  },
+})
+
+export type SkImageUcvProps = InferProps<typeof SkImageUcv>
diff --git a/packages/skiyee-uni-ui/src/types/common.ts b/packages/skiyee-uni-ui/src/types/common.ts
index 0ed8b3f..28639f6 100644
--- a/packages/skiyee-uni-ui/src/types/common.ts
+++ b/packages/skiyee-uni-ui/src/types/common.ts
@@ -15,3 +15,28 @@
  * 用于表单组件的 v-model 绑定
  */
 export type AcceptableModelValue = string | number | null
+
+/**
+ * 图片模式类型
+ * 对应 uni-app image 组件的 mode 属性
+ */
+export type ImageMode =
+  | 'scaleToFill' // 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
+  | 'aspectFit' // 保持纵横比缩放图片，使图片的长边能完全显示出来
+  | 'aspectFill' // 保持纵横比缩放图片，只保证图片的短边能完全显示出来
+  | 'widthFix' // 宽度不变，高度自动变化，保持原图宽高比不变
+  | 'heightFix' // 高度不变，宽度自动变化，保持原图宽高比不变
+  | 'top' // 不缩放图片，只显示图片的顶部区域
+  | 'bottom' // 不缩放图片，只显示图片的底部区域
+  | 'center' // 不缩放图片，只显示图片的中间区域
+  | 'left' // 不缩放图片，只显示图片的左边区域
+  | 'right' // 不缩放图片，只显示图片的右边区域
+  | 'top left' // 不缩放图片，只显示图片的左上边区域
+  | 'top right' // 不缩放图片，只显示图片的右上边区域
+  | 'bottom left' // 不缩放图片，只显示图片的左下边区域
+  | 'bottom right' // 不缩放图片，只显示图片的右下边区域
+
+/**
+ * 圆角大小类型
+ */
+export type RadiusSize = 'small' | 'medium' | 'large' | 'full' | number | string
diff --git a/packages/skiyee-uni-ui/src/utils/format.ts b/packages/skiyee-uni-ui/src/utils/format.ts
index 3d815fb..f40fd1a 100644
--- a/packages/skiyee-uni-ui/src/utils/format.ts
+++ b/packages/skiyee-uni-ui/src/utils/format.ts
@@ -6,7 +6,7 @@ import { isNil } from './is'
  */
 export function formatSize(size: string | number) {
   const isNumeric = !Number.isNaN(Number(size))
-  return isNumeric ? `${size}rpx` : size
+  return isNumeric ? `${size}rpx` : `${size}`
 }
 
 /**