From c1a00285c484df95e3395b4fb215e06a1329fd48 Mon Sep 17 00:00:00 2001
From: "zhangyumei.0319" <zhangyumei.0319@bytedance.com>
Date: Mon, 19 Aug 2024 17:16:56 +0800
Subject: [PATCH] fix: Image component props support native img element
 attributes

---
 content/show/image/index-en-US.md               | 2 ++
 content/show/image/index.md                     | 2 ++
 packages/semi-ui/image/_story/image.stories.tsx | 3 ++-
 packages/semi-ui/image/interface.tsx            | 4 ++--
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/content/show/image/index-en-US.md b/content/show/image/index-en-US.md
index cbfb150368..da887a16b6 100644
--- a/content/show/image/index-en-US.md
+++ b/content/show/image/index-en-US.md
@@ -482,6 +482,8 @@ import { Image, ImagePreview } from '@douyinfe/semi-ui';
 | width            | Image display width                  | number            | - | |
 | setDownloadName  | Set the name of the downloaded image | (src: string) => string | - | 2.40.0 |
 
+Other attributes same as [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes)。Other attributes will be transmitted to the underlying img node.
+
 ### ImagePreview
 
 | Properties       | Instructions                                                                                                                                                             | Type            | Default | Version |
diff --git a/content/show/image/index.md b/content/show/image/index.md
index eeb3f1f4b2..b9bef2d32b 100644
--- a/content/show/image/index.md
+++ b/content/show/image/index.md
@@ -483,6 +483,8 @@ import { Image, ImagePreview } from '@douyinfe/semi-ui';
 | width             | 图片显示宽度                             | number            | - | |
 | setDownloadName   | 设置图片下载名称                         | (src: string) => string | - | 2.40.0 |
 
+其他支持的属性同 [img](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes)。其他属性将透传至底层的 img 节点。
+
 ### ImagePreview
 
 | 属性               | 说明                                                                                                                                               | 类型              | 默认值 | 版本 |
diff --git a/packages/semi-ui/image/_story/image.stories.tsx b/packages/semi-ui/image/_story/image.stories.tsx
index 006b253507..4760fcda16 100644
--- a/packages/semi-ui/image/_story/image.stories.tsx
+++ b/packages/semi-ui/image/_story/image.stories.tsx
@@ -68,9 +68,10 @@ export const BasicPreview = () => {
                 {srcList1.map((src, index) => {
                     return (
                         <Image 
-                            key={index}
+                            key={`${index}`}
                             src={src}
                             width={200}
+                            loading='lazy'
                             alt={`lamp${index + 1}`}
                             data-test={'data-test'}
                             onClick={()=>{}}
diff --git a/packages/semi-ui/image/interface.tsx b/packages/semi-ui/image/interface.tsx
index f17912849a..402020ce50 100644
--- a/packages/semi-ui/image/interface.tsx
+++ b/packages/semi-ui/image/interface.tsx
@@ -11,7 +11,7 @@ export interface ImageStates {
     previewVisible: boolean
 }
 
-export interface ImageProps extends BaseProps {
+export interface ImageProps extends BaseProps, Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'onLoad' | 'onError'> {
     src?: string;
     width?: string | number;
     height?: string | number;
@@ -190,7 +190,7 @@ export interface PreviewImageStates {
     width: number;
     height: number;
     translate: ImageTranslate;
-    currZoom: number;
+    currZoom: number
 }
 
 export interface DragDirection {