diff --git a/package.json b/package.json
index a3d97065..90f0be09 100755
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@imengyu/vue3-context-menu": "^1.4.2",
     "@tinymce/tinymce-vue": "^6.0.1",
     "@visactor/vchart": "^1.11.10",
+    "@vueuse/components": "^10.11.1",
     "@vueuse/core": "^10.11.0",
     "@vueuse/integrations": "^10.11.0",
     "animate.css": "^4.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 682766ad..88010758 100755
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       '@visactor/vchart':
         specifier: ^1.11.10
         version: 1.11.10
+      '@vueuse/components':
+        specifier: ^10.11.1
+        version: 10.11.1(vue@3.4.35(typescript@5.5.4))
       '@vueuse/core':
         specifier: ^10.11.0
         version: 10.11.0(vue@3.4.35(typescript@5.5.4))
@@ -2649,9 +2652,15 @@ packages:
   '@vue/shared@3.4.35':
     resolution: {integrity: sha512-hvuhBYYDe+b1G8KHxsQ0diDqDMA8D9laxWZhNAjE83VZb5UDaXl9Xnz7cGdDSyiHM90qqI/CyGMcpBpiDy6VVQ==}
 
+  '@vueuse/components@10.11.1':
+    resolution: {integrity: sha512-ThcreQCX/eq61sLkLKjigD4PQvs3Wy4zglICvQH9tP6xl87y5KsQEoizn6OI+R3hrOgwQHLJe7Y0wLLh3fBKcg==}
+
   '@vueuse/core@10.11.0':
     resolution: {integrity: sha512-x3sD4Mkm7PJ+pcq3HX8PLPBadXCAlSDR/waK87dz0gQE+qJnaaFhc/dZVfJz+IUYzTMVGum2QlR7ImiJQN4s6g==}
 
+  '@vueuse/core@10.11.1':
+    resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
+
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
@@ -2699,12 +2708,18 @@ packages:
   '@vueuse/metadata@10.11.0':
     resolution: {integrity: sha512-kQX7l6l8dVWNqlqyN3ePW3KmjCQO3ZMgXuBMddIu83CmucrsBfXlH+JoviYyRBws/yLTQO8g3Pbw+bdIoVm4oQ==}
 
+  '@vueuse/metadata@10.11.1':
+    resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==}
+
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
   '@vueuse/shared@10.11.0':
     resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
 
+  '@vueuse/shared@10.11.1':
+    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
@@ -10236,6 +10251,15 @@ snapshots:
 
   '@vue/shared@3.4.35': {}
 
+  '@vueuse/components@10.11.1(vue@3.4.35(typescript@5.5.4))':
+    dependencies:
+      '@vueuse/core': 10.11.1(vue@3.4.35(typescript@5.5.4))
+      '@vueuse/shared': 10.11.1(vue@3.4.35(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@10.11.0(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -10246,6 +10270,16 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
+  '@vueuse/core@10.11.1(vue@3.4.35(typescript@5.5.4))':
+    dependencies:
+      '@types/web-bluetooth': 0.0.20
+      '@vueuse/metadata': 10.11.1
+      '@vueuse/shared': 10.11.1(vue@3.4.35(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@vueuse/core@9.13.0(vue@3.4.35(typescript@5.5.4))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
@@ -10273,11 +10307,20 @@ snapshots:
 
   '@vueuse/metadata@10.11.0': {}
 
+  '@vueuse/metadata@10.11.1': {}
+
   '@vueuse/metadata@9.13.0': {}
 
   '@vueuse/shared@10.11.0(vue@3.4.35(typescript@5.5.4))':
     dependencies:
-      vue-demi: 0.14.8(vue@3.4.35(typescript@5.5.4))
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/shared@10.11.1(vue@3.4.35(typescript@5.5.4))':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.4.35(typescript@5.5.4))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
diff --git a/src/components/SvgIcon/index.vue b/src/components/SvgIcon/index.vue
index 5bc08793..71e1173a 100755
--- a/src/components/SvgIcon/index.vue
+++ b/src/components/SvgIcon/index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { UseImage } from '@vueuse/components'
 import { Icon } from '@iconify/vue'
 
 defineOptions({
@@ -14,7 +15,10 @@ const props = defineProps<{
 }>()
 
 const outputType = computed(() => {
-  if (/^https?:\/\//.test(props.name)) {
+  const hasPathFeatures = (str: string) => {
+    return /^\.{1,2}\//.test(str) || str.startsWith('/') || str.includes('/')
+  }
+  if (/^https?:\/\//.test(props.name) || hasPathFeatures(props.name) || !props.name) {
     return 'img'
   }
   else if (/i-[^:]+:[^:]+/.test(props.name)) {
@@ -56,11 +60,19 @@ const style = computed(() => {
 </script>
 
 <template>
-  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :class="{ [name]: outputType === 'unocss' }" :style="style">
-    <Icon v-if="outputType === 'iconify'" :icon="name" />
+  <i class="relative h-[1em] w-[1em] flex-inline items-center justify-center fill-current leading-[1em]" :style="style">
+    <i v-if="outputType === 'unocss'" class="h-[1em] w-[1em]" :class="name" />
+    <Icon v-else-if="outputType === 'iconify'" :icon="name" />
     <svg v-else-if="outputType === 'svg'" class="h-[1em] w-[1em]" aria-hidden="true">
       <use :xlink:href="`#icon-${name}`" />
     </svg>
-    <img v-else-if="outputType === 'img'" :src="name" class="h-[1em] w-[1em]">
+    <UseImage v-else-if="outputType === 'img'" :src="name" class="h-[1em] w-[1em]">
+      <template #loading>
+        <i class="i-line-md:loading-loop h-[1em] w-[1em]" />
+      </template>
+      <template #error>
+        <i class="i-tdesign:image-error h-[1em] w-[1em]" />
+      </template>
+    </UseImage>
   </i>
 </template>
diff --git a/src/router/modules/icon.example.ts b/src/router/modules/icon.example.ts
index a68b3612..273bdf3f 100755
--- a/src/router/modules/icon.example.ts
+++ b/src/router/modules/icon.example.ts
@@ -14,6 +14,14 @@ const routes: RouteRecordRaw = {
     icon: 'i-ri:remixicon-line',
   },
   children: [
+    {
+      path: 'iconify',
+      name: 'iconExampleIconify',
+      component: () => import('@/views/icon_example/iconify.vue'),
+      meta: {
+        title: 'Iconify',
+      },
+    },
     {
       path: 'svg',
       name: 'iconExampleSvg',
@@ -23,11 +31,11 @@ const routes: RouteRecordRaw = {
       },
     },
     {
-      path: 'iconify',
-      name: 'iconExampleIconify',
-      component: () => import('@/views/icon_example/iconify.vue'),
+      path: 'image',
+      name: 'iconExampleImage',
+      component: () => import('@/views/icon_example/image.vue'),
       meta: {
-        title: 'Iconify',
+        title: 'Image Icon',
       },
     },
   ],
diff --git a/src/views/icon_example/image.vue b/src/views/icon_example/image.vue
new file mode 100644
index 00000000..c4747d05
--- /dev/null
+++ b/src/views/icon_example/image.vue
@@ -0,0 +1,56 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script setup lang="ts">
+const webImage = ref('https://picsum.photos/50')
+function change() {
+  webImage.value = ''
+  webImage.value = `https://picsum.photos/50?random=${Math.random()}`
+}
+
+const fa = new URL('@/assets/images/logo.png', import.meta.url).href
+
+const flip = ref<'horizontal' | 'vertical' | 'both'>()
+const rotate = ref(0)
+</script>
+
+<template>
+  <div>
+    <PageHeader title="Image Icon" content="可以使用本地或网络图片" />
+    <PageMain>
+      <p>网络图片</p>
+      <SvgIcon :name="webImage" :size="48" :flip="flip" :rotate="rotate" />
+      <div class="space-x-2">
+        <HButton @click="change">
+          更改图片
+        </HButton>
+        <HButton @click="webImage = ''">
+          创建错误
+        </HButton>
+      </div>
+      <p>本地图片</p>
+      <SvgIcon :name="fa" :size="48" :flip="flip" :rotate="rotate" />
+      <div>
+        <p>翻转：</p>
+        <ElRadioGroup v-model="flip">
+          <ElRadioButton value="">
+            无
+          </ElRadioButton>
+          <ElRadioButton value="horizontal">
+            水平翻转
+          </ElRadioButton>
+          <ElRadioButton value="vertical">
+            垂直翻转
+          </ElRadioButton>
+          <ElRadioButton value="both">
+            水平垂直翻转
+          </ElRadioButton>
+        </ElRadioGroup>
+        <p>旋转：</p>
+        <ElSlider v-model="rotate" :min="0" :max="360" style="width: 50%;" />
+      </div>
+    </PageMain>
+  </div>
+</template>