From edcc8b710752bd6904baab0025ad19caf0cc9e09 Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Sat, 19 Jun 2021 22:13:13 +0800
Subject: [PATCH] fix: image preview class error #4231

---
 components/image/PreviewGroup.tsx |  9 +++++----
 components/image/index.tsx        | 18 ++++++++++--------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx
index cb6af56d3..81d109073 100644
--- a/components/image/PreviewGroup.tsx
+++ b/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>
       );
diff --git a/components/image/index.tsx b/components/image/index.tsx
index 670ffa358..e572227be 100644
--- a/components/image/index.tsx
+++ b/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>
+      );
     };
   },
 });