fix: image preview class error #4231

Author: tangjinzhou

components/image/PreviewGroup.tsx

@@ -1,5 +1,5 @@
 import PreviewGroup from '../vc-image/src/PreviewGroup';
-import { defineComponent, inject } from 'vue';
+import { computed, defineComponent, inject } from 'vue';
 import { defaultConfigProvider } from '../config-provider';
 import PropTypes from '../_util/vue-types';
 
@@ -9,13 +9,14 @@ const InternalPreviewGroup = defineComponent({
   props: { previewPrefixCls: PropTypes.string },
   setup(props, { attrs, slots }) {
     const configProvider = inject('configProvider', defaultConfigProvider);
+    const prefixCls = computed(() =>
+      configProvider.getPrefixCls('image-preview', props.previewPrefixCls),
+    );
     return () => {
-      const { getPrefixCls } = configProvider;
-      const prefixCls = getPrefixCls('image-preview', props.previewPrefixCls);
       return (
         <PreviewGroup
-          previewPrefixCls={prefixCls}
           {...{ ...attrs, ...props }}
+          previewPrefixCls={prefixCls.value}
           v-slots={slots}
         ></PreviewGroup>
       );

components/image/index.tsx

@@ -1,7 +1,7 @@
-import { App, defineComponent, ExtractPropTypes, ImgHTMLAttributes, inject, Plugin } from 'vue';
-import { defaultConfigProvider } from '../config-provider';
+import { App, defineComponent, ExtractPropTypes, ImgHTMLAttributes, Plugin } from 'vue';
 import ImageInternal from '../vc-image';
 import { imageProps } from '../vc-image/src/Image';
+import useConfigInject from '../_util/hooks/useConfigInject';
 import PreviewGroup from './PreviewGroup';
 
 export type ImageProps = Partial<
@@ -11,13 +11,15 @@ const Image = defineComponent<ImageProps>({
   name: 'AImage',
   inheritAttrs: false,
   props: imageProps as any,
-  setup(props, ctx) {
-    const { slots, attrs } = ctx;
-    const configProvider = inject('configProvider', defaultConfigProvider);
+  setup(props, { slots, attrs }) {
+    const { prefixCls } = useConfigInject('image', props);
     return () => {
-      const { getPrefixCls } = configProvider;
-      const prefixCls = getPrefixCls('image', props.prefixCls);
-      return <ImageInternal {...{ ...attrs, ...props, prefixCls }} v-slots={slots}></ImageInternal>;
+      return (
+        <ImageInternal
+          {...{ ...attrs, ...props, prefixCls: prefixCls.value }}
+          v-slots={slots}
+        ></ImageInternal>
+      );
     };
   },
 });