From 0845fad612d4e9d5ade962404bd444a221ac5dbb Mon Sep 17 00:00:00 2001
From: shuoxian <shuoxian.sun@gmail.com>
Date: Mon, 1 Sep 2025 20:11:35 +0800
Subject: [PATCH] refactor(Image-Preview): Refactor placeholder from vNode type
 to () => vNode

---
 components/image/demo/preview-src.vue |  8 ++++----
 components/image/index.en-US.md       | 15 ++++++++-------
 components/image/index.zh-CN.md       | 14 +++++++-------
 components/vc-image/src/Image.tsx     |  2 +-
 components/vc-image/src/Preview.tsx   | 13 +++++++++----
 5 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/components/image/demo/preview-src.vue b/components/image/demo/preview-src.vue
index ce4570bf8..f74bde67e 100644
--- a/components/image/demo/preview-src.vue
+++ b/components/image/demo/preview-src.vue
@@ -18,18 +18,18 @@ You can set different preview image. You can also customize the loading placehol
 
 <template>
   <a-image
-    :width="200"
     src="https://aliyuncdn.antdv.com/logo.png"
+    :width="200"
     :preview="{
-      src: 'http://47.100.102.7:11501/admin-api/infra/file/24/get//algorithm/execute/2025/08/20/20210628_iPhoneSE_YL_42_1755674307938_1755674703040.jpg',
-      placeholder: h(CustomLoadingComp),
+      src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      placeholder: () => CustomLoadingComp,
     }"
   />
   <a-image
     :width="200"
     src="https://aliyuncdn.antdv.com/logo.png"
     :preview="{
-      src: 'http://47.100.102.7:11501/admin-api/infra/file/24/get//algorithm/execute/2025/08/20/20210628_iPhoneSE_YL_42_1755674307938_1755674703040.jpg',
+      src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
       placeholder: true,
     }"
   />
diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md
index 5200aba31..34642b8bd 100644
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@@ -19,12 +19,12 @@ Previewable image.
 | --- | --- | --- | --- | --- |
 | alt | Image description | string | - | 2.0.0 |
 | fallback | Load failure fault-tolerant src | string | - | 2.0.0 |
-| height | Image height | string \| number | - | 2.0.0 |
-| placeholder | Load placeholder, use default placeholder when set `true` | boolean \| slot | - | 2.0.0 |
-| preview | preview config, disabled when `false` | boolean \| [previewType](#previewtype) | true | 2.0.0 |
+| height | Image height | string\| number | - | 2.0.0 |
+| placeholder | Load placeholder, use default placeholder when set `true` | boolean\| slot | - | 2.0.0 |
+| preview | preview config, disabled when `false` | boolean\| [previewType](#previewtype) | true | 2.0.0 |
 | src | Image path | string | - | 2.0.0 |
-| previewMask | custom mask | false \| function \| slot | - | 3.2.0 |
-| width | Image width | string \| number | - | 2.0.0 |
+| previewMask | custom mask | false\| function \| slot | - | 3.2.0 |
+| width | Image width | string\| number | - | 2.0.0 |
 
 ### events
 
@@ -38,11 +38,12 @@ Previewable image.
 {
   visible?: boolean;
   onVisibleChange?: (visible, prevVisible) => void;
-  getContainer?: string | HTMLElement | (() => HTMLElement);
+  getContainer: string | HTMLElement | (() => HTMLElement);
   src?: string;
   maskClassName?: string;
   current?: number;
+  placeholder?: (() => vNode) | boolean;
 }
 ```
 
-Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+Other attributes [&lt;img&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md
index e0b3fe22a..28bc91f11 100644
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@@ -20,12 +20,12 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
 | --- | --- | --- | --- | --- |
 | alt | 图像描述 | string | - | 2.0.0 |
 | fallback | 加载失败容错地址 | string | - | 2.0.0 |
-| height | 图像高度 | string \| number | - | 2.0.0 |
-| placeholder | 加载占位, 为 `true` 时使用默认占位 | boolean \| slot | - | 2.0.0 |
-| preview | 预览参数，为 `false` 时禁用 | boolean \| [previewType](#previewtype) | true | 2.0.0 |
+| height | 图像高度 | string\| number | - | 2.0.0 |
+| placeholder | 加载占位, 为 `true` 时使用默认占位 | boolean\| slot | - | 2.0.0 |
+| preview | 预览参数，为 `false` 时禁用 | boolean\| [previewType](#previewtype) | true | 2.0.0 |
 | src | 图片地址 | string | - | 2.0.0 |
-| previewMask | 自定义 mask | false \| function \| slot | - | 3.2.0 |
-| width | 图像宽度 | string \| number | - | 2.0.0 |
+| previewMask | 自定义 mask | false\| function \| slot | - | 3.2.0 |
+| width | 图像宽度 | string\| number | - | 2.0.0 |
 
 ### 事件
 
@@ -43,8 +43,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
   src?: string;
   maskClassName?: string;
   current?: number;
-  placeholder?: VNode | boolean;
+  placeholder?: (() => vNode) | boolean;
 }
 ```
 
-其他属性见 [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+其他属性见 [&lt;img&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
index 5757c5282..0aa53c1bb 100644
--- a/components/vc-image/src/Image.tsx
+++ b/components/vc-image/src/Image.tsx
@@ -20,7 +20,7 @@ export type ImagePreviewType = Omit<
   src?: string;
   visible?: boolean;
   fallback?: string;
-  placeholder?: VNode | boolean;
+  placeholder?: boolean | (() => VNode);
   onVisibleChange?: (value: boolean, prevValue: boolean) => void;
   getContainer?: GetContainer | false;
   maskClassName?: string;
diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index 0ab3dac66..36efc1b15 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -8,7 +8,6 @@ import {
   watch,
   cloneVNode,
   ref,
-  isVNode,
   nextTick,
 } from 'vue';
 import type { VNode, Ref, PropType } from 'vue';
@@ -32,6 +31,7 @@ export interface PreviewProps extends Omit<IDialogChildProps, 'onClose' | 'mask'
   src?: string;
   alt?: string;
   rootClassName?: string;
+  placeholder?: boolean | (() => VNode);
   icons?: {
     rotateLeft?: VNode;
     rotateRight?: VNode;
@@ -55,7 +55,7 @@ export const previewProps = {
   alt: String,
   fallback: String,
   placeholder: {
-    type: Object as PropType<VNode | boolean>,
+    type: [Boolean, Function] as PropType<boolean | (() => VNode)>,
     default: () => true,
   },
   rootClassName: String,
@@ -75,7 +75,8 @@ const Preview = defineComponent({
       props.icons,
     );
     // 判断是否是自定义placeholder
-    const isCustomPlaceholder = computed(() => isVNode(props.placeholder));
+    const isCustomPlaceholder = computed(() => typeof props.placeholder === 'function');
+
     const isDefaultPlaceholder = computed(() => {
       return props.placeholder === true;
     });
@@ -88,6 +89,10 @@ const Preview = defineComponent({
         status.value = 'loading';
       },
     );
+    const renderPlaceholder = () => {
+      const { placeholder } = props;
+      return typeof placeholder === 'function' ? placeholder() : placeholder;
+    };
     const scale = shallowRef(1);
     const rotate = shallowRef(0);
     const flip = reactive({ x: 1, y: 1 });
@@ -427,7 +432,7 @@ const Preview = defineComponent({
               <Spin size="large" class={`${props.prefixCls}-img-placeholder`}></Spin>
             )}
             {isCustomPlaceholder.value && status.value === 'loading' && (
-              <div class={`${props.prefixCls}-img-placeholder`}>{props.placeholder}</div>
+              <div class={`${props.prefixCls}-img-placeholder`}>{renderPlaceholder()}</div>
             )}
           </div>
           {showLeftOrRightSwitches.value && (