chore: Image component props support native img element attributes (#…

…2427) Co-authored-by: pointhalo <88709023+pointhalo@users.noreply.github.com>
DouyinFE · Aug 20, 2024 · 63d0a0b · 63d0a0b
1 parent b55b4ee
commit 63d0a0b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 {