fix(image):preview image can't pass img ImgHTMLAttributes

components/vc-image/src/Image.tsx

@@ -12,6 +12,7 @@ import PreviewGroup, { context } from './PreviewGroup';
 import type { IDialogChildProps } from '../../vc-dialog/IDialogPropTypes';
 export type GetContainer = string | HTMLElement | (() => HTMLElement);
 import type { PreviewProps } from './Preview';
+import { COMMON_PROPS } from './common';
 
 export type ImagePreviewType = Omit<
   IDialogChildProps,
@@ -89,6 +90,16 @@ const ImageInternal = defineComponent({
     const getPreviewContainer = computed(() => preview.value.getContainer);
     const isControlled = computed(() => previewVisible.value !== undefined);
 
+    const imgCommonProps = computed<ImgHTMLAttributes>(() => {
+      const commonProps = {};
+      COMMON_PROPS.forEach(key => {
+        if (attrs[key]) {
+          commonProps[key] = attrs[key];
+        }
+      });
+      return commonProps;
+    });
+
     const onPreviewVisibleChange = (val, preval) => {
       preview.value.onVisibleChange?.(val, preval);
     };
@@ -176,7 +187,12 @@ const ImageInternal = defineComponent({
             return () => {};
           }
 
-          unRegister = registerImage(currentId.value, src.value, canPreview.value);
+          unRegister = registerImage(
+            currentId.value,
+            src.value,
+            canPreview.value,
+            imgCommonProps.value,
+          );
 
           if (!canPreview.value) {
             unRegister();
@@ -202,31 +218,15 @@ const ImageInternal = defineComponent({
         wrapperStyle,
         rootClassName,
       } = props;
-      const {
-        width,
-        height,
-        crossorigin,
-        decoding,
-        alt,
-        sizes,
-        srcset,
-        usemap,
-        class: cls,
-        style,
-      } = attrs as ImgHTMLAttributes;
+      const { width, height, class: cls, style } = attrs as ImgHTMLAttributes;
       const { icons, maskClassName, ...dialogProps } = preview.value;
 
       const wrappperClass = cn(prefixCls, wrapperClassName, rootClassName, {
         [`${prefixCls}-error`]: isError.value,
       });
       const mergedSrc = isError.value && fallback ? fallback : src.value;
-      const imgCommonProps = {
-        crossorigin,
-        decoding,
-        alt,
-        sizes,
-        srcset,
-        usemap,
+      const commonProps = {
+        ...imgCommonProps.value,
         width,
         height,
         class: cn(
@@ -241,7 +241,6 @@ const ImageInternal = defineComponent({
           ...(style as CSSProperties),
         },
       };
-
       return (
         <>
           <div
@@ -260,7 +259,7 @@ const ImageInternal = defineComponent({
             }}
           >
             <img
-              {...imgCommonProps}
+              {...commonProps}
               {...(isError.value && fallback
                 ? {
                     src: fallback,
@@ -288,10 +287,10 @@ const ImageInternal = defineComponent({
               onClose={onPreviewClose}
               mousePosition={mousePosition.value}
               src={mergedSrc}
-              alt={alt}
               getContainer={getPreviewContainer.value}
               icons={icons}
               rootClassName={rootClassName}
+              imgCommonProps={imgCommonProps.value}
             />
           )}
         </>

components/vc-image/src/Preview.tsx

@@ -8,7 +8,7 @@ import {
   watch,
   cloneVNode,
 } from 'vue';
-import type { VNode, PropType } from 'vue';
+import type { VNode, PropType, ImgHTMLAttributes } from 'vue';
 
 import classnames from '../../_util/classNames';
 import Dialog from '../../vc-dialog';
@@ -39,6 +39,7 @@ export interface PreviewProps extends Omit<IDialogChildProps, 'onClose' | 'mask'
     flipX?: VNode;
     flipY?: VNode;
   };
+  imgCommonProps?: ImgHTMLAttributes;
 }
 
 const initialPosition = {
@@ -54,6 +55,10 @@ export const previewProps = {
     type: Object as PropType<PreviewProps['icons']>,
     default: () => ({} as PreviewProps['icons']),
   },
+  imgCommonProps: {
+    type: Object as PropType<PreviewProps['imgCommonProps']>,
+    default: () => ({}),
+  },
 };
 const Preview = defineComponent({
   compatConfig: { MODE: 3 },
@@ -345,7 +350,7 @@ const Preview = defineComponent({
     });
 
     return () => {
-      const { visible, prefixCls, rootClassName } = props;
+      const { visible, prefixCls, rootClassName, imgCommonProps } = props;
       return (
         <Dialog
           {...attrs}
@@ -384,12 +389,12 @@ const Preview = defineComponent({
             }}
           >
             <img
+              {...imgCommonProps}
               onMousedown={onMouseDown}
               onDblclick={onDoubleClick}
               ref={imgRef}
               class={`${props.prefixCls}-img`}
               src={combinationSrc.value}
-              alt={props.alt}
               style={{
                 transform: `scale3d(${flip.x * scale.value}, ${flip.y * scale.value}, 1) rotate(${
                   rotate.value

components/vc-image/src/PreviewGroup.tsx

@@ -1,4 +1,4 @@
-import type { PropType, Ref, ComputedRef } from 'vue';
+import type { PropType, Ref, ComputedRef, ImgHTMLAttributes } from 'vue';
 import {
   ref,
   shallowRef,
@@ -33,6 +33,7 @@ export interface GroupConsumerProps {
 interface PreviewUrl {
   url: string;
   canPreview: boolean;
+  imgCommonProps: ImgHTMLAttributes;
 }
 
 export interface GroupConsumerValue extends GroupConsumerProps {
@@ -43,7 +44,12 @@ export interface GroupConsumerValue extends GroupConsumerProps {
   setCurrent: (current: number) => void;
   setShowPreview: (isShowPreview: boolean) => void;
   setMousePosition: (mousePosition: null | { x: number; y: number }) => void;
-  registerImage: (id: number, url: string, canPreview?: boolean) => () => void;
+  registerImage: (
+    id: number,
+    url: string,
+    canPreview?: boolean,
+    imgCommonProps?: ImgHTMLAttributes,
+  ) => () => void;
   rootClassName?: string;
 }
 const previewGroupContext = Symbol('previewGroupContext');
@@ -125,6 +131,7 @@ const Group = defineComponent({
       previewUrls.set(id, {
         url,
         canPreview,
+        imgCommonProps: {},
       });
     };
     const setCurrent = (val: number) => {
@@ -134,13 +141,14 @@ const Group = defineComponent({
       mousePosition.value = val;
     };
 
-    const registerImage = (id: number, url: string, canPreview = true) => {
+    const registerImage = (id: number, url: string, canPreview = true, imgCommonProps = {}) => {
       const unRegister = () => {
         previewUrls.delete(id);
       };
       previewUrls.set(id, {
         url,
         canPreview,
+        imgCommonProps,
       });
       return unRegister;
     };
@@ -198,6 +206,7 @@ const Group = defineComponent({
             src={canPreviewUrls.value.get(current.value)}
             icons={props.icons}
             getContainer={getPreviewContainer.value}
+            imgCommonProps={previewUrls.get(current.value)?.imgCommonProps}
           />
         </>
       );

components/vc-image/src/common.ts

@@ -0,0 +1,13 @@
+import { ImgHTMLAttributes } from 'vue';
+
+export const COMMON_PROPS: (keyof Omit<ImgHTMLAttributes, 'src'>)[] = [
+  'crossorigin',
+  'decoding',
+  'draggable',
+  'loading',
+  'referrerpolicy',
+  'sizes',
+  'srcset',
+  'usemap',
+  'alt',
+];