feat: [Image] Image supports imgCls and imgStyle APIs for transparently transmitting styles to img nodes

content/show/image/index-en-US.md

@@ -469,6 +469,8 @@ import { Image, ImagePreview } from '@douyinfe/semi-ui';
 | className        | custom style class name              | string            | - | |
 | crossOrigin      | Passthrough to the crossorigin of the native img tag | 'anonymous' \| 'use-credentials' |-| |
 | fallback         | Custom loading failed display content | ReactNode  | - | |
+| imgCls           | Custom style class name, transparently passed to img node | string            | - | |
+| imgStyle         | Custom styles, transparently passed to img node | CSSProperties     | - | |
 | height           | Image display height                 | number            | - | |
 | onClick          | Click callback on image              | (event: Event) => void | - | |
 | onError          | Load error callback                  | (event: Event) => void | - | |

content/show/image/index.md

@@ -471,6 +471,8 @@ import { Image, ImagePreview } from '@douyinfe/semi-ui';
 | crossOrigin       | 透传给原生 img 标签的 crossorigin         | 'anonymous'｜'use-credentials'| - | |
 | fallback          | 加载失败容错地址或者自定义加载失败时的显示内容 | ReactNode  | - | |
 | height            | 图片显示高度                             | number            | - | |
+| imgCls            | 自定义样式类名，透传给 img 节点              | string            | - | |
+| imgStyle          | 自定义样式，透传给 img 节点                | CSSProperties     | - | |
 | onClick           | 点击图片的回调                            | (event: any) => void | - | |
 | onError           | 加载错误回调                              | (event: Event) => void | - | |
 | onLoad            | 加载成功回调                              | (event: Event) => void | - | |

packages/semi-ui/image/__test__/image.test.js

@@ -0,0 +1,17 @@
+import { Image } from '../../index';
+import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
+
+
+describe('Image', () => {
+    it('custom imgCls & imgStyle', () => {
+        let spyOnClick = sinon.spy(() => { });
+        const imageComponent = (<Image 
+            imgCls="custom-img-cls"
+            imgStyle={{ maxWidth: 300}}
+            src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg"
+        />);
+        const image = mount(imageComponent, { attachTo: document.getElementById('container') });
+        expect(image.find(`.${BASE_CLASS_PREFIX}-image-img`).at(0).hasClass('custom-img-cls')).toBe(true);
+        expect(image.find(`.${BASE_CLASS_PREFIX}-image-img`).at(0).getDOMNode().style.maxWidth).toBe('300px');
+    });
+})

packages/semi-ui/image/_story/image.stories.jsx

@@ -105,6 +105,14 @@ export const basicImage = () => {
     </>
 )}
 
+export const ImgClsAndStyle = () => {
+    return <Image 
+        imgCls="custom-img-cls"
+        imgStyle={{ maxWidth: 300}}
+        src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg"
+    />
+}
+
 export const LoadErrorImage = () => (
     <>
         <p>加载失败默认样式</p>

packages/semi-ui/image/image.tsx

@@ -174,7 +174,10 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
 
     render() {
         const { src, loadStatus, previewVisible } = this.state;
-        const { src: picSrc, width, height, alt, style, className, crossOrigin, preview, fallback, placeholder, imageID, setDownloadName, ...restProps } = this.props;
+        const { src: picSrc, width, height, alt, style, className, crossOrigin, preview, 
+            fallback, placeholder, imageID, setDownloadName, imgCls, imgStyle,
+            ...restProps 
+        } = this.props;
         const outerStyle = Object.assign({ width, height }, style);
         const outerCls = cls(prefixCls, className);
         const canPreview = loadStatus === "success" && preview && !this.isInGroup();
@@ -197,9 +200,11 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
                     src={this.isInGroup() && this.isLazyLoad() ? undefined : src}
                     data-src={src}
                     alt={alt}
+                    style={imgStyle}
                     className={cls(`${prefixCls}-img`, {
                         [`${prefixCls}-img-preview`]: showPreviewCursor,
                         [`${prefixCls}-img-error`]: loadStatus === "error",
+                        [imgCls]: Boolean(imgCls),
                     })}
                     width={width}
                     height={height}

packages/semi-ui/image/interface.tsx

@@ -25,7 +25,9 @@ export interface ImageProps extends BaseProps{
     crossOrigin?: "anonymous"| "use-credentials";
     children?: ReactNode;
     imageID?: number;
-    setDownloadName?: (src: string) => string
+    setDownloadName?: (src: string) => string;
+    imgStyle?: React.CSSProperties;
+    imgCls?: string
 }
 
 export interface PreviewProps extends BaseProps {