From d939d3f18ae48dfa1fae8ebe1d4c68a53d60f6b0 Mon Sep 17 00:00:00 2001
From: ilvsx <ilvsxk@gmail.com>
Date: Sun, 14 Apr 2024 22:52:59 +0800
Subject: [PATCH 1/2] feat(image): add img class

---
 packages/web-vue/components/image/README.en-US.md | 1 +
 packages/web-vue/components/image/README.zh-CN.md | 1 +
 packages/web-vue/components/image/image.vue       | 9 ++++++++-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/web-vue/components/image/README.en-US.md b/packages/web-vue/components/image/README.en-US.md
index 7794d42a4..238a9d374 100644
--- a/packages/web-vue/components/image/README.en-US.md
+++ b/packages/web-vue/components/image/README.en-US.md
@@ -52,6 +52,7 @@ description: Used to show and preview pictures.
 |default-preview-visible|The default open state of the preview|`boolean`|`false`||
 |preview-props|Preview configuration items (all options are optional) [ImagePreviewProps](#image-preview%20Props)|`ImagePreviewProps`|`-`||
 |footer-class|The class name of the bottom display area|`string\|array\|object`|`-`|2.23.0|
+|img-class|The class name of the image|`string \| any[]`|`-`||
 ### `<image>` Events
 
 |Event Name|Description|Parameters|
diff --git a/packages/web-vue/components/image/README.zh-CN.md b/packages/web-vue/components/image/README.zh-CN.md
index 02c178bcc..bba190cee 100644
--- a/packages/web-vue/components/image/README.zh-CN.md
+++ b/packages/web-vue/components/image/README.zh-CN.md
@@ -50,6 +50,7 @@ description: 展示和预览图片。
 |default-preview-visible|预览的默认打开状态|`boolean`|`false`||
 |preview-props|预览的配置项（所有选项都是可选的） [ImagePreviewProps](#image-preview%20Props)|`ImagePreviewProps`|`-`||
 |footer-class|底部显示区域的类名|`string\|array\|object`|`-`|2.23.0|
+|img-class|图片的类名|`string \| any[]`|`-`||
 ### `<image>` Events
 
 |事件名|描述|参数|
diff --git a/packages/web-vue/components/image/image.vue b/packages/web-vue/components/image/image.vue
index c8e6190c4..b5088cc70 100644
--- a/packages/web-vue/components/image/image.vue
+++ b/packages/web-vue/components/image/image.vue
@@ -2,7 +2,7 @@
   <div :class="wrapperClassNames" :style="wrapperStyles">
     <img
       ref="refImg"
-      :class="`${prefixCls}-img`"
+      :class="[`${prefixCls}-img`, imgClass]"
       v-bind="imgProps"
       :style="{ ...imgStyle, ...fitStyle }"
       :title="title"
@@ -125,6 +125,13 @@ export default defineComponent({
     height: {
       type: [String, Number] as PropType<string | number>,
     },
+    /**
+     * @zh 图片的类名
+     * @en The class name of the image
+     */
+    imgClass: {
+      type: [String, Array] as PropType<string | any[]>,
+    },
     /**
      * @zh 标题
      * @en Title

From 69c8145f03fc13d9cd4c70362cc679d14f53730e Mon Sep 17 00:00:00 2001
From: ilvsx <ilvsxk@gmail.com>
Date: Mon, 15 Apr 2024 00:50:42 +0800
Subject: [PATCH 2/2] test(image): add imgClass props test

---
 .../web-vue/components/image/__test__/index.test.ts | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/web-vue/components/image/__test__/index.test.ts b/packages/web-vue/components/image/__test__/index.test.ts
index b7aecf285..bd542e5df 100644
--- a/packages/web-vue/components/image/__test__/index.test.ts
+++ b/packages/web-vue/components/image/__test__/index.test.ts
@@ -36,6 +36,19 @@ describe('Image', () => {
     expect(wrapper.find('.arco-image-error').exists()).toBe(true);
   });
 
+  test('image Props img-class should work', async () => {
+    const wrapper = await mount(Image, {
+      props: {
+        src: imgSrc,
+        imgClass: 'img-class-test',
+      },
+    });
+    await wrapper.vm.onImgLoaded();
+    expect(wrapper.find('img').attributes('class').split(' ')).toContainEqual(
+      'img-class-test'
+    );
+  });
+
   test('Footer should work', async () => {
     const wrapper = await mount(Image, {
       props: {