From c82b798c5fb9c67674d8b01c632860f34eb7b08c Mon Sep 17 00:00:00 2001
From: TingShine <791405318@qq.com>
Date: Fri, 11 Nov 2022 16:29:35 +0800
Subject: [PATCH] docs(image): update image demo

---
 src/image/_example/base.jsx          | 14 ----
 src/image/_example/crop.jsx          | 24 +++++++
 src/image/_example/error.jsx         | 19 ------
 src/image/_example/fit.jsx           | 32 ---------
 src/image/_example/index.jsx         | 97 +++-------------------------
 src/image/_example/lazy.jsx          | 14 ----
 src/image/_example/loading-error.jsx | 24 +++++++
 src/image/_example/loading-tip.jsx   | 21 ++++++
 src/image/_example/loading.jsx       | 17 -----
 src/image/_example/position.jsx      | 36 -----------
 src/image/_example/rounded.jsx       | 24 +++++++
 src/image/_example/shape.jsx         | 26 --------
 src/image/_example/size.jsx          | 38 +++++++++++
 13 files changed, 141 insertions(+), 245 deletions(-)
 delete mode 100644 src/image/_example/base.jsx
 create mode 100644 src/image/_example/crop.jsx
 delete mode 100644 src/image/_example/error.jsx
 delete mode 100644 src/image/_example/fit.jsx
 delete mode 100644 src/image/_example/lazy.jsx
 create mode 100644 src/image/_example/loading-error.jsx
 create mode 100644 src/image/_example/loading-tip.jsx
 delete mode 100644 src/image/_example/loading.jsx
 delete mode 100644 src/image/_example/position.jsx
 create mode 100644 src/image/_example/rounded.jsx
 delete mode 100644 src/image/_example/shape.jsx
 create mode 100644 src/image/_example/size.jsx

diff --git a/src/image/_example/base.jsx b/src/image/_example/base.jsx
deleted file mode 100644
index 63f7cbdf..00000000
--- a/src/image/_example/base.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Image } from 'tdesign-mobile-react';
-
-const BaseUsage = React.memo(() => (
-  <div className="t-image__demo-base">
-    <Image
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg?imageMogr2/thumbnail/1000x"
-      alt="这是一张图片"
-      style={{ width: 72, height: 72 }}
-    />
-  </div>
-));
-
-export default BaseUsage;
diff --git a/src/image/_example/crop.jsx b/src/image/_example/crop.jsx
new file mode 100644
index 00000000..ab30d3bd
--- /dev/null
+++ b/src/image/_example/crop.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Image } from 'tdesign-mobile-react';
+import './style/index.less';
+
+const CropDemo = React.memo(() => (
+  <>
+    <div className="t-image__demo-base">
+      <div className="t-image__demo-wrap">
+        <Image src="https://tdesign.gtimg.com/site/upload1.png" fit="cover" style={{ width: 72, height: 72 }} />
+        <h5>裁切</h5>
+      </div>
+      <div className="t-image__demo-wrap">
+        <Image src="https://tdesign.gtimg.com/site/upload1.png" fit="contain" style={{ width: 89, height: 72 }} />
+        <h5>适应高</h5>
+      </div>
+      <div className="t-image__demo-wrap">
+        <Image src="https://tdesign.gtimg.com/site/upload1.png" fit="fill" style={{ width: 134, height: 72 }} />
+        <h5>拉伸</h5>
+      </div>
+    </div>
+  </>
+));
+
+export default CropDemo;
diff --git a/src/image/_example/error.jsx b/src/image/_example/error.jsx
deleted file mode 100644
index b7fc7c49..00000000
--- a/src/image/_example/error.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { Image } from 'tdesign-mobile-react';
-
-const ErrorUsage = React.memo(() => (
-  <div className="t-image__demo-status">
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-22222.jpg"
-    />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-22222.jpg"
-      error={<span style={{ fontSize: 12 }}>加载失败</span>}
-    />
-  </div>
-));
-
-export default ErrorUsage;
diff --git a/src/image/_example/fit.jsx b/src/image/_example/fit.jsx
deleted file mode 100644
index 6dfea24b..00000000
--- a/src/image/_example/fit.jsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { Image } from 'tdesign-mobile-react';
-
-const FitUsage = React.memo(() => (
-  <div className="t-image__demo-base">
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg"
-      fit="cover"
-    />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg"
-      fit="fill"
-    />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg"
-      fit="scale-down"
-    />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg"
-      fit="contain"
-    />
-  </div>
-));
-
-export default FitUsage;
diff --git a/src/image/_example/index.jsx b/src/image/_example/index.jsx
index b5a333ab..82242995 100644
--- a/src/image/_example/index.jsx
+++ b/src/image/_example/index.jsx
@@ -1,109 +1,32 @@
 import React from 'react';
-import { Image } from 'tdesign-mobile-react';
-import { LoadingIcon } from 'tdesign-icons-react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import './style/index.less';
+import CropDemo from './crop';
+import RoundDemo from './rounded';
+import LoadingTipDemo from './loading-tip';
+import LoadingErrorDemo from './loading-error';
+import SizeDemo from './size';
 
 export default function Base() {
   return (
     <>
       <TDemoHeader title="Image 图片" summary="用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。" />
       <TDemoBlock title="01 类型" summary="裁切样式">
-        <div className="t-image__demo-base">
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" fit="cover" style={{ width: 72, height: 72 }} />
-            <h5>裁切</h5>
-          </div>
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" fit="contain" style={{ width: 89, height: 72 }} />
-            <h5>适应高</h5>
-          </div>
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" fit="fill" style={{ width: 134, height: 72 }} />
-            <h5>拉伸</h5>
-          </div>
-        </div>
+        <CropDemo />
       </TDemoBlock>
-
       <TDemoBlock summary="圆角样式">
-        <div className="t-image__demo-base">
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" shape="square" style={{ width: 72, height: 72 }} />
-            <h5>方形</h5>
-          </div>
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" shape="round" style={{ width: 72, height: 72 }} />
-            <h5>圆角方形</h5>
-          </div>
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" shape="circle" style={{ width: 72, height: 72 }} />
-            <h5>圆角</h5>
-          </div>
-        </div>
+        <RoundDemo />
       </TDemoBlock>
 
       <TDemoBlock title="02 状态" summary="加载中提示">
-        <div className="t-image__demo-base">
-          <div className="t-image__demo-wrap">
-            <Image src="" style={{ width: 72, height: 72 }} />
-            <h5>默认提示</h5>
-          </div>
-          <div className="t-image__demo-wrap">
-            <Image src="" loading={<LoadingIcon size="1.5em" />} style={{ width: 72, height: 72 }} />
-            <h5>自定义提示</h5>
-          </div>
-        </div>
+        <LoadingTipDemo />
       </TDemoBlock>
-
       <TDemoBlock summary="加载失败提示">
-        <div className="t-image__demo-base">
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload111.png" style={{ width: 72, height: 72 }} />
-            <h5>默认提示</h5>
-          </div>
-          <div className="t-image__demo-wrap">
-            <Image
-              src="https://tdesign.gtimg.com/site/upload1111.png"
-              error={<span style={{ fontSize: 12 }}>加载失败</span>}
-              style={{ width: 72, height: 72 }}
-            />
-            <h5>自定义提示</h5>
-          </div>
-        </div>
+        <LoadingErrorDemo />
       </TDemoBlock>
 
       <TDemoBlock title="03 规格" summary="常用图片尺寸">
-        <div className="t-image__demo-size">
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 56, height: 56 }} />
-            <h5>图片 56</h5>
-          </div>
-
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 48, height: 48 }} />
-            <h5>图片 48</h5>
-          </div>
-
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 32, height: 32 }} />
-            <h5>图片 32</h5>
-          </div>
-
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 24, height: 24 }} />
-            <h5>图片 24</h5>
-          </div>
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 120, height: 120 }} />
-            <h5>图片 120</h5>
-          </div>
-
-          <div className="t-image__demo-wrap">
-            <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 72, height: 72 }} />
-            <h5>图片 72</h5>
-          </div>
-        </div>
+        <SizeDemo />
       </TDemoBlock>
     </>
   );
diff --git a/src/image/_example/lazy.jsx b/src/image/_example/lazy.jsx
deleted file mode 100644
index 9d8f45a9..00000000
--- a/src/image/_example/lazy.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Image } from 'tdesign-mobile-react';
-
-const LazyUsage = React.memo(() => (
-  <div className="t-image__demo-base">
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg?imageMogr2/thumbnail/1000x"
-      lazy
-    />
-  </div>
-));
-
-export default LazyUsage;
diff --git a/src/image/_example/loading-error.jsx b/src/image/_example/loading-error.jsx
new file mode 100644
index 00000000..2b684807
--- /dev/null
+++ b/src/image/_example/loading-error.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Image } from 'tdesign-mobile-react';
+import './style/index.less';
+
+const LoadingErrorDemo = React.memo(() => (
+  <>
+    <div className="t-image__demo-base">
+      <div className="t-image__demo-wrap">
+        <Image src="https://tdesign.gtimg.com/site/upload111.png" style={{ width: 72, height: 72 }} />
+        <h5>默认提示</h5>
+      </div>
+      <div className="t-image__demo-wrap">
+        <Image
+          src="https://tdesign.gtimg.com/site/upload1111.png"
+          error={<span style={{ fontSize: 12 }}>加载失败</span>}
+          style={{ width: 72, height: 72 }}
+        />
+        <h5>自定义提示</h5>
+      </div>
+    </div>
+  </>
+));
+
+export default LoadingErrorDemo;
diff --git a/src/image/_example/loading-tip.jsx b/src/image/_example/loading-tip.jsx
new file mode 100644
index 00000000..f8e8c681
--- /dev/null
+++ b/src/image/_example/loading-tip.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Image } from 'tdesign-mobile-react';
+import { LoadingIcon } from 'tdesign-icons-react';
+import './style/index.less';
+
+const LoadingTipDemo = React.memo(() => (
+  <>
+    <div className="t-image__demo-base">
+      <div className="t-image__demo-wrap">
+        <Image src="" style={{ width: 72, height: 72 }} />
+        <h5>默认提示</h5>
+      </div>
+      <div className="t-image__demo-wrap">
+        <Image src="" loading={<LoadingIcon size="1.5em" />} style={{ width: 72, height: 72 }} />
+        <h5>自定义提示</h5>
+      </div>
+    </div>
+  </>
+));
+
+export default LoadingTipDemo;
diff --git a/src/image/_example/loading.jsx b/src/image/_example/loading.jsx
deleted file mode 100644
index 3544c6af..00000000
--- a/src/image/_example/loading.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Image } from 'tdesign-mobile-react';
-import { LoadingIcon } from 'tdesign-icons-react';
-
-const LoadingUsage = React.memo(() => (
-  <div className="t-image__demo-status">
-    <Image style={{ width: 72, height: 72 }} src="https://tdesign.gtimg.com/site/upload1.png" />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://tdesign.gtimg.com/site/upload1.png"
-      loading={<LoadingIcon size="1.5em" />}
-    />
-  </div>
-));
-
-export default LoadingUsage;
diff --git a/src/image/_example/position.jsx b/src/image/_example/position.jsx
deleted file mode 100644
index 5310b135..00000000
--- a/src/image/_example/position.jsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import { Image } from 'tdesign-mobile-react';
-
-const PositionUsage = React.memo(() => (
-  <div className="t-image__demo-position">
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg?imageMogr2/thumbnail/60x60"
-      position="top"
-      fit="none"
-    />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg?imageMogr2/thumbnail/60x60"
-      position="right"
-      fit="none"
-    />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg?imageMogr2/thumbnail/60x60"
-      position="bottom"
-      fit="none"
-    />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg?imageMogr2/thumbnail/60x60"
-      position="left"
-      fit="none"
-    />
-  </div>
-));
-
-export default PositionUsage;
diff --git a/src/image/_example/rounded.jsx b/src/image/_example/rounded.jsx
new file mode 100644
index 00000000..2a39cd22
--- /dev/null
+++ b/src/image/_example/rounded.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Image } from 'tdesign-mobile-react';
+import './style/index.less';
+
+const RoundDemo = React.memo(() => (
+  <>
+    <div className="t-image__demo-base">
+      <div className="t-image__demo-wrap">
+        <Image src="https://tdesign.gtimg.com/site/upload1.png" shape="square" style={{ width: 72, height: 72 }} />
+        <h5>方形</h5>
+      </div>
+      <div className="t-image__demo-wrap">
+        <Image src="https://tdesign.gtimg.com/site/upload1.png" shape="round" style={{ width: 72, height: 72 }} />
+        <h5>圆角方形</h5>
+      </div>
+      <div className="t-image__demo-wrap">
+        <Image src="https://tdesign.gtimg.com/site/upload1.png" shape="circle" style={{ width: 72, height: 72 }} />
+        <h5>圆角</h5>
+      </div>
+    </div>
+  </>
+));
+
+export default RoundDemo;
diff --git a/src/image/_example/shape.jsx b/src/image/_example/shape.jsx
deleted file mode 100644
index 3231ad50..00000000
--- a/src/image/_example/shape.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { Image } from 'tdesign-mobile-react';
-
-const ShapeUsage = React.memo(() => (
-  <div className="t-image__demo-base">
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg"
-      shape="square"
-    />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg"
-      shape="round"
-    />
-
-    <Image
-      style={{ width: 72, height: 72 }}
-      src="https://cdn-we-retail.ym.tencent.com/retail-ui/components-exp/image/image-2.jpg"
-      shape="circle"
-    />
-  </div>
-));
-
-export default ShapeUsage;
diff --git a/src/image/_example/size.jsx b/src/image/_example/size.jsx
new file mode 100644
index 00000000..75b557fc
--- /dev/null
+++ b/src/image/_example/size.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Image } from 'tdesign-mobile-react';
+import './style/index.less';
+
+const SizeDemo = React.memo(() => (
+  <div className="t-image__demo-size">
+    <div className="t-image__demo-wrap">
+      <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 56, height: 56 }} />
+      <h5>图片 56</h5>
+    </div>
+
+    <div className="t-image__demo-wrap">
+      <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 48, height: 48 }} />
+      <h5>图片 48</h5>
+    </div>
+
+    <div className="t-image__demo-wrap">
+      <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 32, height: 32 }} />
+      <h5>图片 32</h5>
+    </div>
+
+    <div className="t-image__demo-wrap">
+      <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 24, height: 24 }} />
+      <h5>图片 24</h5>
+    </div>
+    <div className="t-image__demo-wrap">
+      <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 120, height: 120 }} />
+      <h5>图片 120</h5>
+    </div>
+
+    <div className="t-image__demo-wrap">
+      <Image src="https://tdesign.gtimg.com/site/upload1.png" style={{ width: 72, height: 72 }} />
+      <h5>图片 72</h5>
+    </div>
+  </div>
+));
+
+export default SizeDemo;