From 5288c3a4a16c567e1caba9cee0cef2448a92baec Mon Sep 17 00:00:00 2001
From: eiinu <eiinu@qq.com>
Date: Wed, 3 Jan 2024 19:29:04 +0800
Subject: [PATCH 1/3] chore(image): split demo

---
 src/packages/__VUE/image/demo/basic.vue       |  6 ++++
 src/packages/__VUE/image/demo/fit.vue         | 12 +++++++
 .../__VUE/image/{demo.vue => demo/index.vue}  | 36 +++++++++----------
 src/packages/__VUE/image/doc.en-US.md         | 29 ++-------------
 src/packages/__VUE/image/doc.md               | 29 ++-------------
 5 files changed, 38 insertions(+), 74 deletions(-)
 create mode 100644 src/packages/__VUE/image/demo/basic.vue
 create mode 100644 src/packages/__VUE/image/demo/fit.vue
 rename src/packages/__VUE/image/{demo.vue => demo/index.vue} (82%)

diff --git a/src/packages/__VUE/image/demo/basic.vue b/src/packages/__VUE/image/demo/basic.vue
new file mode 100644
index 0000000000..0124b29c88
--- /dev/null
+++ b/src/packages/__VUE/image/demo/basic.vue
@@ -0,0 +1,6 @@
+<template>
+  <nut-image :src="url" width="100" height="100" />
+</template>
+<script setup lang="ts">
+const url = '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+</script>
diff --git a/src/packages/__VUE/image/demo/fit.vue b/src/packages/__VUE/image/demo/fit.vue
new file mode 100644
index 0000000000..341fae96f4
--- /dev/null
+++ b/src/packages/__VUE/image/demo/fit.vue
@@ -0,0 +1,12 @@
+<template>
+  <nut-space wrap>
+    <div v-for="fit in fits" :key="fit">
+      <nut-image :src="url" width="100" height="100" :fit="fit" />
+      <div style="text-align: center">{{ fit }}</div>
+    </div>
+  </nut-space>
+</template>
+<script setup>
+const url = '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
+</script>
diff --git a/src/packages/__VUE/image/demo.vue b/src/packages/__VUE/image/demo/index.vue
similarity index 82%
rename from src/packages/__VUE/image/demo.vue
rename to src/packages/__VUE/image/demo/index.vue
index 524e892ff4..e36d0b54db 100644
--- a/src/packages/__VUE/image/demo.vue
+++ b/src/packages/__VUE/image/demo/index.vue
@@ -1,17 +1,12 @@
 <template>
-  <div class="demo">
-    <h2>{{ translate('basic') }}</h2>
-    <nut-image :src="src" width="100" height="100"></nut-image>
+  <Demo>
+    <h2>{{ t('basic') }}</h2>
+    <Basic />
 
-    <h2>{{ translate('fill') }}</h2>
-    <nut-row :gutter="10" flex-wrap="wrap">
-      <nut-col v-for="fit in fits" :key="fit" :span="8">
-        <nut-image :src="src" width="100" height="100" :fit="fit"></nut-image>
-        <div class="text">{{ fit }}</div>
-      </nut-col>
-    </nut-row>
+    <h2>{{ t('fill') }}</h2>
+    <Fit />
 
-    <h2>{{ translate('position') }}</h2>
+    <h2>{{ t('position') }}</h2>
     <nut-row :gutter="10" flex-wrap="wrap">
       <nut-col v-for="pos in position2" :key="pos" :span="8">
         <nut-image :src="src" width="100" height="100" fit="contain" :position="pos"></nut-image>
@@ -26,7 +21,7 @@
       </nut-col>
     </nut-row>
 
-    <h2>{{ translate('circle') }}</h2>
+    <h2>{{ t('circle') }}</h2>
     <nut-row :gutter="10">
       <nut-col :span="8">
         <nut-image :src="src" width="100" height="100" fit="contain" round></nut-image>
@@ -42,7 +37,7 @@
       </nut-col>
     </nut-row>
 
-    <h2>{{ translate('loading') }}</h2>
+    <h2>{{ t('loading') }}</h2>
     <nut-cell>
       <nut-row :gutter="10">
         <nut-col :span="8">
@@ -60,7 +55,7 @@
       </nut-row>
     </nut-cell>
 
-    <h2>{{ translate('error') }}</h2>
+    <h2>{{ t('error') }}</h2>
     <nut-cell>
       <nut-row :gutter="10">
         <nut-col :span="8">
@@ -78,7 +73,7 @@
       </nut-row>
     </nut-cell>
 
-    <h2>{{ translate('lazy') }}</h2>
+    <h2>{{ t('lazy') }}</h2>
     <nut-cell>
       <nut-image :src="src + '?t=1'" lazy-load height="200" width="100%"></nut-image>
     </nut-cell>
@@ -94,14 +89,16 @@
     <nut-cell>
       <nut-image :src="src + '?t=5'" lazy-load height="200" width="100%"></nut-image>
     </nut-cell>
-  </div>
+  </Demo>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
 import { Loading, CircleClose } from '@nutui/icons-vue';
-import { useTranslate } from '@/sites/assets/util/useTranslate';
-import { ImageFit } from './type';
-const translate = useTranslate({
+import { useTranslate } from '@/sites/utils';
+import Basic from './basic.vue';
+import Fit from './fit.vue';
+
+const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
     fill: '填充模式',
@@ -122,7 +119,6 @@ const translate = useTranslate({
   }
 });
 const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-const fits = ref<ImageFit[]>(['contain', 'cover', 'fill', 'none', 'scale-down']);
 const position1 = ref(['left', 'center', 'right']);
 const position2 = ref(['top', 'center', 'bottom']);
 </script>
diff --git a/src/packages/__VUE/image/doc.en-US.md b/src/packages/__VUE/image/doc.en-US.md
index eb5cca6926..93f7aba150 100644
--- a/src/packages/__VUE/image/doc.en-US.md
+++ b/src/packages/__VUE/image/doc.en-US.md
@@ -18,38 +18,13 @@ app.use();
 
 The basic usage is the same as that of the native IMG tag. You can set the native attributes such as SRC, width, height, and Alt.
 
-:::demo
-
-```vue
-<template>
-  <nut-image
-    src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
-    width="100"
-    height="100"
-  />
-</template>
-```
-
-:::
+> demo: image basic
 
 ### Object Fill
 
 The `fit` attribute is used to set the image filling mode, which is equivalent to the original `Object-fit` attribute.
 
-:::demo
-
-```vue
-<template>
-  <nut-image
-    src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
-    width="100"
-    height="100"
-    fit="contain"
-  />
-</template>
-```
-
-:::
+> demo: image fit
 
 ### Object Position
 
diff --git a/src/packages/__VUE/image/doc.md b/src/packages/__VUE/image/doc.md
index acf8ee8c58..d1751e4842 100644
--- a/src/packages/__VUE/image/doc.md
+++ b/src/packages/__VUE/image/doc.md
@@ -18,38 +18,13 @@ app.use();
 
 基础用法与原生 `img` 标签一致，可以设置 `src`、`width`、`height`、`alt` 等原生属性。
 
-:::demo
-
-```vue
-<template>
-  <nut-image
-    src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
-    width="100"
-    height="100"
-  />
-</template>
-```
-
-:::
+> demo: image basic
 
 ### 填充模式
 
 通过 `fit` 属性可以设置图片填充模式，等同于原生的 `object-fit` 属性，可选值见下方表格。
 
-:::demo
-
-```vue
-<template>
-  <nut-image
-    src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
-    width="100"
-    height="100"
-    fit="contain"
-  />
-</template>
-```
-
-:::
+> demo: image fit
 
 ### 图片位置
 

From 689500579b4aec0e2f17ea86cf6940d902938b70 Mon Sep 17 00:00:00 2001
From: eiinu <eiinu@qq.com>
Date: Thu, 4 Jan 2024 10:52:10 +0800
Subject: [PATCH 2/3] chore(image): split demo

---
 src/packages/__VUE/image/demo/basic.vue    |   2 +-
 src/packages/__VUE/image/demo/error.vue    |  16 +++
 src/packages/__VUE/image/demo/fit.vue      |   2 +-
 src/packages/__VUE/image/demo/index.vue    | 117 +++------------------
 src/packages/__VUE/image/demo/lazy.vue     |   9 ++
 src/packages/__VUE/image/demo/loading.vue  |  13 +++
 src/packages/__VUE/image/demo/position.vue |  19 ++++
 src/packages/__VUE/image/demo/round.vue    |  15 +++
 src/packages/__VUE/image/doc.en-US.md      |  93 +---------------
 src/packages/__VUE/image/doc.md            |  93 +---------------
 10 files changed, 100 insertions(+), 279 deletions(-)
 create mode 100644 src/packages/__VUE/image/demo/error.vue
 create mode 100644 src/packages/__VUE/image/demo/lazy.vue
 create mode 100644 src/packages/__VUE/image/demo/loading.vue
 create mode 100644 src/packages/__VUE/image/demo/position.vue
 create mode 100644 src/packages/__VUE/image/demo/round.vue

diff --git a/src/packages/__VUE/image/demo/basic.vue b/src/packages/__VUE/image/demo/basic.vue
index 0124b29c88..6fd0c6fe5c 100644
--- a/src/packages/__VUE/image/demo/basic.vue
+++ b/src/packages/__VUE/image/demo/basic.vue
@@ -2,5 +2,5 @@
   <nut-image :src="url" width="100" height="100" />
 </template>
 <script setup lang="ts">
-const url = '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
 </script>
diff --git a/src/packages/__VUE/image/demo/error.vue b/src/packages/__VUE/image/demo/error.vue
new file mode 100644
index 0000000000..ef68ea928c
--- /dev/null
+++ b/src/packages/__VUE/image/demo/error.vue
@@ -0,0 +1,16 @@
+<template>
+  <nut-space>
+    <nut-image src="https://x" width="100" height="100" show-error></nut-image>
+    <nut-image src="https://x" width="100" height="100" show-loading>
+      <template #loading>
+        <Loading width="16" height="16"></Loading>
+      </template>
+      <template #error>
+        <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
+      </template>
+    </nut-image>
+  </nut-space>
+</template>
+<script setup lang="ts">
+import { Loading, CircleClose } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/image/demo/fit.vue b/src/packages/__VUE/image/demo/fit.vue
index 341fae96f4..6dd902d11d 100644
--- a/src/packages/__VUE/image/demo/fit.vue
+++ b/src/packages/__VUE/image/demo/fit.vue
@@ -7,6 +7,6 @@
   </nut-space>
 </template>
 <script setup>
-const url = '//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
 const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
 </script>
diff --git a/src/packages/__VUE/image/demo/index.vue b/src/packages/__VUE/image/demo/index.vue
index e36d0b54db..df99084822 100644
--- a/src/packages/__VUE/image/demo/index.vue
+++ b/src/packages/__VUE/image/demo/index.vue
@@ -3,138 +3,53 @@
     <h2>{{ t('basic') }}</h2>
     <Basic />
 
-    <h2>{{ t('fill') }}</h2>
+    <h2>{{ t('fit') }}</h2>
     <Fit />
 
     <h2>{{ t('position') }}</h2>
-    <nut-row :gutter="10" flex-wrap="wrap">
-      <nut-col v-for="pos in position2" :key="pos" :span="8">
-        <nut-image :src="src" width="100" height="100" fit="contain" :position="pos"></nut-image>
-        <div class="text">contain</div>
-        <div class="text">{{ pos }}</div>
-      </nut-col>
+    <Position />
 
-      <nut-col v-for="pos in position1" :key="pos" :span="8">
-        <nut-image :src="src" width="100" height="100" fit="cover" :position="pos"></nut-image>
-        <div class="text">cover</div>
-        <div class="text">{{ pos }}</div>
-      </nut-col>
-    </nut-row>
-
-    <h2>{{ t('circle') }}</h2>
-    <nut-row :gutter="10">
-      <nut-col :span="8">
-        <nut-image :src="src" width="100" height="100" fit="contain" round></nut-image>
-        <div class="text">contain</div>
-      </nut-col>
-      <nut-col :span="8">
-        <nut-image :src="src" width="100" height="100" fit="cover" round></nut-image>
-        <div class="text">cover</div>
-      </nut-col>
-      <nut-col :span="8">
-        <nut-image :src="src" width="100" height="100" fit="cover" radius="10" round></nut-image>
-        <div class="text">cover</div>
-      </nut-col>
-    </nut-row>
+    <h2>{{ t('round') }}</h2>
+    <Round />
 
     <h2>{{ t('loading') }}</h2>
-    <nut-cell>
-      <nut-row :gutter="10">
-        <nut-col :span="8">
-          <nut-image width="100" height="100" show-loading></nut-image>
-          <div class="text">默认</div>
-        </nut-col>
-        <nut-col :span="8">
-          <nut-image width="100" height="100" show-loading>
-            <template #loading>
-              <Loading width="16px" height="16px" name="loading"></Loading>
-            </template>
-          </nut-image>
-          <div class="text">自定义</div>
-        </nut-col>
-      </nut-row>
-    </nut-cell>
+    <Loading />
 
     <h2>{{ t('error') }}</h2>
-    <nut-cell>
-      <nut-row :gutter="10">
-        <nut-col :span="8">
-          <nut-image src="https://x" width="100" height="100" show-error></nut-image>
-          <div class="text">默认</div>
-        </nut-col>
-        <nut-col :span="8">
-          <nut-image src="https://x" width="100" height="100" show-loading>
-            <template #error>
-              <CircleClose width="16px" height="16px" name="circleClose"></CircleClose>
-            </template>
-          </nut-image>
-          <div class="text">自定义</div>
-        </nut-col>
-      </nut-row>
-    </nut-cell>
+    <Error />
 
     <h2>{{ t('lazy') }}</h2>
-    <nut-cell>
-      <nut-image :src="src + '?t=1'" lazy-load height="200" width="100%"></nut-image>
-    </nut-cell>
-    <nut-cell>
-      <nut-image :src="src + '?t=2'" lazy-load height="200" width="100%"></nut-image>
-    </nut-cell>
-    <nut-cell>
-      <nut-image :src="src + '?t=3'" lazy-load height="200" width="100%"></nut-image>
-    </nut-cell>
-    <nut-cell>
-      <nut-image :src="src + '?t=4'" lazy-load height="200" width="100%"></nut-image>
-    </nut-cell>
-    <nut-cell>
-      <nut-image :src="src + '?t=5'" lazy-load height="200" width="100%"></nut-image>
-    </nut-cell>
+    <Lazy />
   </Demo>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue';
-import { Loading, CircleClose } from '@nutui/icons-vue';
 import { useTranslate } from '@/sites/utils';
 import Basic from './basic.vue';
 import Fit from './fit.vue';
+import Position from './position.vue';
+import Round from './round.vue';
+import Loading from './loading.vue';
+import Error from './error.vue';
+import Lazy from './lazy.vue';
 
 const t = useTranslate({
   'zh-CN': {
     basic: '基础用法',
-    fill: '填充模式',
+    fit: '填充模式',
     position: '图片位置',
-    circle: '圆形图片',
+    round: '圆形图片',
     loading: '加载中提示',
     error: '加载失败',
     lazy: '懒加载'
   },
   'en-US': {
     basic: 'Basic Usage',
-    fill: 'Object Fill',
+    fit: 'Object Fill',
     position: 'Object Position',
-    circle: 'Round',
+    round: 'Round',
     loading: 'Loading',
     error: 'Error',
     lazy: 'Lazy Load'
   }
 });
-const src = ref('//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-const position1 = ref(['left', 'center', 'right']);
-const position2 = ref(['top', 'center', 'bottom']);
 </script>
-<style lang="scss" scoped>
-.demo {
-  // background: #fff !important;
-  .text {
-    margin-top: 5px;
-    text-align: center;
-    color: #999;
-  }
-
-  .nut-row-flex-wrap {
-    .nut-col {
-      margin-bottom: 20px;
-    }
-  }
-}
-</style>
diff --git a/src/packages/__VUE/image/demo/lazy.vue b/src/packages/__VUE/image/demo/lazy.vue
new file mode 100644
index 0000000000..e1ba53bfc2
--- /dev/null
+++ b/src/packages/__VUE/image/demo/lazy.vue
@@ -0,0 +1,9 @@
+<template>
+  <nut-cell v-for="(_, index) in count" :key="index">
+    <nut-image :src="`${url}?t=${index}`" height="200" width="100%" lazy-load />
+  </nut-cell>
+</template>
+<script setup lang="ts">
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+const count = Array.from({ length: 7 });
+</script>
diff --git a/src/packages/__VUE/image/demo/loading.vue b/src/packages/__VUE/image/demo/loading.vue
new file mode 100644
index 0000000000..f373ef253f
--- /dev/null
+++ b/src/packages/__VUE/image/demo/loading.vue
@@ -0,0 +1,13 @@
+<template>
+  <nut-space>
+    <nut-image width="100" height="100" show-loading></nut-image>
+    <nut-image width="100" height="100" show-loading>
+      <template #loading>
+        <Loading width="16" height="16"></Loading>
+      </template>
+    </nut-image>
+  </nut-space>
+</template>
+<script setup lang="ts">
+import { Loading } from '@nutui/icons-vue';
+</script>
diff --git a/src/packages/__VUE/image/demo/position.vue b/src/packages/__VUE/image/demo/position.vue
new file mode 100644
index 0000000000..a63a866192
--- /dev/null
+++ b/src/packages/__VUE/image/demo/position.vue
@@ -0,0 +1,19 @@
+<template>
+  <nut-space wrap>
+    <div v-for="pos in positions1" :key="pos">
+      <nut-image :src="url" width="100" height="100" fit="contain" :position="pos" />
+      <div style="text-align: center"> contain </div>
+      <div style="text-align: center">{{ pos }}</div>
+    </div>
+    <div v-for="pos in positions2" :key="pos">
+      <nut-image :src="url" width="100" height="100" fit="cover" :position="pos" />
+      <div style="text-align: center"> cover </div>
+      <div style="text-align: center">{{ pos }}</div>
+    </div>
+  </nut-space>
+</template>
+<script setup>
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+const positions1 = ['top', 'center', 'bottom'];
+const positions2 = ['left', 'center', 'right'];
+</script>
diff --git a/src/packages/__VUE/image/demo/round.vue b/src/packages/__VUE/image/demo/round.vue
new file mode 100644
index 0000000000..ae2887841f
--- /dev/null
+++ b/src/packages/__VUE/image/demo/round.vue
@@ -0,0 +1,15 @@
+<template>
+  <nut-space>
+    <div>
+      <nut-image :src="url" width="100" height="100" fit="cover" round></nut-image>
+      <div style="text-align: center">cover</div>
+    </div>
+    <div>
+      <nut-image :src="url" width="100" height="100" fit="cover" radius="10px"></nut-image>
+      <div style="text-align: center">cover</div>
+    </div>
+  </nut-space>
+</template>
+<script setup lang="ts">
+const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
+</script>
diff --git a/src/packages/__VUE/image/doc.en-US.md b/src/packages/__VUE/image/doc.en-US.md
index 93f7aba150..afab3af216 100644
--- a/src/packages/__VUE/image/doc.en-US.md
+++ b/src/packages/__VUE/image/doc.en-US.md
@@ -30,112 +30,29 @@ The `fit` attribute is used to set the image filling mode, which is equivalent t
 
 The position property can be used to set the position of the picture, which is equivalent to the original `Object-position` property when combined with the FIT property.
 
-:::demo
-
-```vue
-<template>
-  <nut-image
-    src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
-    width="100"
-    height="100"
-    fit="contain"
-    postion="left"
-  />
-</template>
-```
-
-:::
+> demo: image position
 
 ### Round
 
 The round attribute allows you to set the image to be round. Note that if the image is not contained and fit is contained or scale-down, a full circle cannot be contained.
 
-:::demo
-
-```vue
-<template>
-  <nut-image
-    src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
-    width="100"
-    height="100"
-    round
-  />
-</template>
-```
-
-:::
+> demo: image round
 
 ### Loading
 
 The Image component provides a default `loading` prompt and supports custom content through the loading slot.
 
-:::demo
-
-```vue
-<template>
-  <nut-image width="100" height="100" show-loading>
-    <template #loading>
-      <Loading width="16px" height="16px" name="loading" />
-    </template>
-  </nut-image>
-</template>
-<script setup>
-import { Loading } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: image loading
 
 ### Error
 
 The Image component provides a default loading failure warning and supports custom content through the `error` slot.
 
-:::demo
-
-```vue
-<template>
-  <nut-image src="https://x" width="100" height="100" show-error>
-    <template #error>
-      <CircleClose width="16px" height="16px" name="circleClose" />
-    </template>
-  </nut-image>
-</template>
-<script setup>
-import { CircleClose } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: image error
 
 ### LazyLoad
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-image :src="src + '?t=1'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-  <nut-cell>
-    <nut-image :src="src + '?t=2'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-  <nut-cell>
-    <nut-image :src="src + '?t=3'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-  <nut-cell>
-    <nut-image :src="src + '?t=4'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-  <nut-cell>
-    <nut-image :src="src + '?t=5'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const src = ref('https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-</script>
-```
-
-:::
+> demo: image lazy
 
 ## API
 
diff --git a/src/packages/__VUE/image/doc.md b/src/packages/__VUE/image/doc.md
index d1751e4842..706b6d74fe 100644
--- a/src/packages/__VUE/image/doc.md
+++ b/src/packages/__VUE/image/doc.md
@@ -30,114 +30,31 @@ app.use();
 
 通过 `position` 属性可以设置图片位置，结合 `fit` 属性使用，等同于原生的 `object-position` 属性。
 
-:::demo
-
-```vue
-<template>
-  <nut-image
-    src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
-    width="100"
-    height="100"
-    fit="contain"
-    postion="left"
-  />
-</template>
-```
-
-:::
+> demo: image position
 
 ### 圆形图片
 
 通过 `round` 属性可以设置图片变圆，注意当图片宽高不相等且 `fit` 为 `contain` 或 `scale-down` 时，将无法填充一个完整的圆形。
 
-:::demo
-
-```vue
-<template>
-  <nut-image
-    src="//img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg"
-    width="100"
-    height="100"
-    round
-  />
-</template>
-```
-
-:::
+> demo: image round
 
 ### 加载中图片
 
 Image 组件提供了默认的加载中提示，支持通过 `loading` 插槽自定义内容。
 
-:::demo
-
-```vue
-<template>
-  <nut-image width="100" height="100" show-loading>
-    <template #loading>
-      <Loading width="16px" height="16px" name="loading" />
-    </template>
-  </nut-image>
-</template>
-<script setup>
-import { Loading } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: image loading
 
 ### 加载失败
 
 Image 组件提供了默认的加载失败提示，支持通过 `error` 插槽自定义内容。
 
-:::demo
-
-```vue
-<template>
-  <nut-image src="https://x" width="100" height="100" show-error>
-    <template #error>
-      <CircleClose width="16px" height="16px" name="circleClose" />
-    </template>
-  </nut-image>
-</template>
-<script setup>
-import { CircleClose } from '@nutui/icons-vue';
-</script>
-```
-
-:::
+> demo: image error
 
 ### 懒加载
 
 刷新后滚动 Demo 页面，在控制台中查看图片请求时间。
 
-:::demo
-
-```vue
-<template>
-  <nut-cell>
-    <nut-image :src="src + '?t=1'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-  <nut-cell>
-    <nut-image :src="src + '?t=2'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-  <nut-cell>
-    <nut-image :src="src + '?t=3'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-  <nut-cell>
-    <nut-image :src="src + '?t=4'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-  <nut-cell>
-    <nut-image :src="src + '?t=5'" lazy-load height="200" width="100%"></nut-image>
-  </nut-cell>
-</template>
-<script setup>
-import { ref } from 'vue';
-const src = ref('https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg');
-</script>
-```
-
-:::
+> demo: image lazy
 
 ## API
 

From bd0d38b20ba032ba5f0dd53e495107ee68534ba8 Mon Sep 17 00:00:00 2001
From: eiinu <eiinu@qq.com>
Date: Thu, 4 Jan 2024 11:00:17 +0800
Subject: [PATCH 3/3] fix: allow js

---
 src/packages/__VUE/image/demo/position.vue | 2 +-
 tsconfig.json                              | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/packages/__VUE/image/demo/position.vue b/src/packages/__VUE/image/demo/position.vue
index a63a866192..1b8ed4771e 100644
--- a/src/packages/__VUE/image/demo/position.vue
+++ b/src/packages/__VUE/image/demo/position.vue
@@ -12,7 +12,7 @@
     </div>
   </nut-space>
 </template>
-<script setup>
+<script setup lang="ts">
 const url = 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg';
 const positions1 = ['top', 'center', 'bottom'];
 const positions2 = ['left', 'center', 'right'];
diff --git a/tsconfig.json b/tsconfig.json
index 178e08dc56..f74078b4d5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,6 +17,7 @@
     "lib": ["esnext", "dom"],
     "outDir": "./tsc/test",
     "types": ["vite/client", "vitest/globals"],
+    "allowJs": true,
     "paths": {
       "@/*": ["src/*"]
     }