1
0
Эх сурвалжийг харах

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

Co-authored-by: pointhalo <[email protected]>
YyumeiZhang 1 жил өмнө
parent
commit
63d0a0b499

+ 2 - 0
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 |

+ 2 - 0
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
 
 | 属性               | 说明                                                                                                                                               | 类型              | 默认值 | 版本 |

+ 2 - 1
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={()=>{}}

+ 2 - 2
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 {