feat(image): 添加预览图加载占位符支持。Add preview image loading placeholder support.

components/image/demo/preview-src.vue

@@ -8,20 +8,44 @@ title:
 
 ## zh-CN
 
-可以设置不同的预览图片。
+可以设置不同的预览图片。可以自定义预览图的加载占位符(placeholder)。
 
 ## en-US
 
-You can set different preview image.
+You can set different preview image. You can also customize the loading placeholder of preview image with VNode.
 
 </docs>
 
 <template>
+  <a-image
+    src="https://aliyuncdn.antdv.com/logo.png"
+    :width="200"
+    :preview="{
+      src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      placeholder: () => CustomLoadingComp,
+    }"
+  />
   <a-image
     :width="200"
     src="https://aliyuncdn.antdv.com/logo.png"
     :preview="{
       src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+      placeholder: true,
     }"
   />
 </template>
+
+<script lang="ts" setup>
+import { h } from 'vue';
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
+import { theme } from 'ant-design-vue';
+const { token } = theme.useToken();
+
+const CustomLoadingComp = h(LoadingOutlined, {
+  style: {
+    fontSize: '256px',
+    color: token.value.colorPrimary,
+  },
+  spin: true,
+});
+</script>

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 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)

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,7 +43,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
   src?: string;
   maskClassName?: string;
   current?: number;
+  placeholder?: (() => vNode) | boolean;
 }
 ```
 
-其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)

components/image/style/index.ts

@@ -193,6 +193,9 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
           transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`,
           userSelect: 'none',
           pointerEvents: 'auto',
+          '&-placeholder': {
+            position: 'absolute',
+          },
 
           '&-wrapper': {
             ...genBoxStyle(),
@@ -214,7 +217,6 @@ export const genImagePreviewStyle: GenerateStyle<ImageToken> = (token: ImageToke
             },
           },
         },
-
         [`${previewCls}-moving`]: {
           [`${previewCls}-preview-img`]: {
             cursor: 'grabbing',

components/vc-image/src/Image.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, PropType } from 'vue';
+import type { CSSProperties, PropType, VNode } from 'vue';
 import { ref, watch, defineComponent, computed, onMounted, onUnmounted } from 'vue';
 import isNumber from 'lodash-es/isNumber';
 import cn from '../../_util/classNames';
@@ -19,6 +19,8 @@ export type ImagePreviewType = Omit<
 > & {
   src?: string;
   visible?: boolean;
+  fallback?: string;
+  placeholder?: boolean | (() => VNode);
   onVisibleChange?: (value: boolean, prevValue: boolean) => void;
   getContainer?: GetContainer | false;
   maskClassName?: string;
@@ -79,6 +81,7 @@ const ImageInternal = defineComponent({
         onVisibleChange: () => {},
         getContainer: undefined,
       };
+
       return typeof props.preview === 'object'
         ? mergeDefaultValue(props.preview, defaultValues)
         : defaultValues;
@@ -288,6 +291,7 @@ const ImageInternal = defineComponent({
               onClose={onPreviewClose}
               mousePosition={mousePosition.value}
               src={mergedSrc}
+              placeholder={preview.value.placeholder}
               alt={alt}
               getContainer={getPreviewContainer.value}
               icons={icons}

components/vc-image/src/Preview.tsx

@@ -7,11 +7,14 @@ import {
   shallowRef,
   watch,
   cloneVNode,
+  ref,
+  nextTick,
 } from 'vue';
-import type { VNode, PropType } from 'vue';
-
+import type { VNode, Ref, PropType } from 'vue';
+import type { ImageStatus } from './Image';
 import classnames from '../../_util/classNames';
 import Dialog from '../../vc-dialog';
+import Spin from '../../spin';
 import { type IDialogChildProps, dialogPropTypes } from '../../vc-dialog/IDialogPropTypes';
 import { getOffset } from '../../vc-util/Dom/css';
 import addEventListener from '../../vc-util/Dom/addEventListener';
@@ -28,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;
@@ -49,6 +53,11 @@ export const previewProps = {
   ...dialogPropTypes(),
   src: String,
   alt: String,
+  fallback: String,
+  placeholder: {
+    type: [Boolean, Function] as PropType<boolean | (() => VNode)>,
+    default: () => true,
+  },
   rootClassName: String,
   icons: {
     type: Object as PropType<PreviewProps['icons']>,
@@ -65,7 +74,25 @@ const Preview = defineComponent({
     const { rotateLeft, rotateRight, zoomIn, zoomOut, close, left, right, flipX, flipY } = reactive(
       props.icons,
     );
+    // 判断是否是自定义placeholder
+    const isCustomPlaceholder = computed(() => typeof props.placeholder === 'function');
+
+    const isDefaultPlaceholder = computed(() => {
+      return props.placeholder === true;
+    });
+    const hasPlaceholder = computed(() => isCustomPlaceholder.value || isDefaultPlaceholder.value);
+    const status: Ref<ImageStatus> = ref(hasPlaceholder.value ? 'loading' : 'normal');
 
+    watch(
+      () => props.src,
+      () => {
+        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 });
@@ -386,6 +413,11 @@ const Preview = defineComponent({
             <img
               onMousedown={onMouseDown}
               onDblclick={onDoubleClick}
+              onLoad={() => {
+                nextTick(() => {
+                  status.value = 'normal';
+                });
+              }}
               ref={imgRef}
               class={`${props.prefixCls}-img`}
               src={combinationSrc.value}
@@ -396,6 +428,12 @@ const Preview = defineComponent({
                 }deg)`,
               }}
             />
+            {isDefaultPlaceholder.value && status.value === 'loading' && (
+              <Spin size="large" class={`${props.prefixCls}-img-placeholder`}></Spin>
+            )}
+            {isCustomPlaceholder.value && status.value === 'loading' && (
+              <div class={`${props.prefixCls}-img-placeholder`}>{renderPlaceholder()}</div>
+            )}
           </div>
           {showLeftOrRightSwitches.value && (
             <div