feat: pass redundant parameters in Image to img node (#1334)

* fix: [Image] Pass extra parameters to img

* chore: fix packeage.json order error

package.json

@@ -17,8 +17,8 @@
         "start": "npm run story",
         "pre-story": "lerna exec --scope=@douyinfe/semi-ui --scope=@douyinfe/semi-foundation -- rimraf ./lib && lerna run build:lib --scope @douyinfe/semi-webpack-plugin --scope eslint-plugin-semi-design",
         "story": "npm run pre-story && start-storybook -c ./.storybook/js/ -p 6006",
-        "story:ts": "npm run pre-story && && start-storybook -c ./.storybook/ts/ -p 6007",
-        "story:ani": "npm run pre-story && && start-storybook -c ./.storybook/animation/react -p 6008",
+        "story:ts": "npm run pre-story && start-storybook -c ./.storybook/ts/ -p 6007",
+        "story:ani": "npm run pre-story && start-storybook -c ./.storybook/animation/react -p 6008",
         "lint": "npm run lint:script && npm run lint:style",
         "lint:script": "eslint packages src --ext '.js,.jsx,.ts,.tsx'",
         "lint:script-fix": "eslint packages src --ext '.js,.jsx,.ts,.tsx' --fix",

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

@@ -0,0 +1,83 @@
+import React, { useState, useCallback, useMemo } from "react";
+import {
+    Image,
+    ImagePreview,
+    Switch,
+} from "../../index";
+import { storiesOf } from '@storybook/react';
+
+
+const stories = storiesOf('Image', module);
+
+const srcList1 = [
+    "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/lion.jpeg",
+    "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/seaside.jpeg",
+    "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/beach.jpeg",
+];
+
+export const BasicPreview = () => {
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [customTooltip, setCustomTooltip] = useState(false);
+    const [infinite, setInfinite] = useState(false);
+
+    const customTooltipProps = {
+        prevTip: "Prev",
+        nextTip: "Next",
+        zoomInTip: "ZoomIn",
+        zoomOutTip: "ZoomOut",
+        rotateTip: "Rotate",
+        downloadTip: "Download",
+        adaptiveTip: "Adaption",
+        originTip: "Original size"
+    };
+
+    const props = useMemo(() => {
+        let props = {};
+        if (showTooltip) {
+            props = { showTooltip: true };
+            if (customTooltip) {
+                props = {...props, ...customTooltipProps}
+            }
+        }
+        if (infinite) {
+            props['infinite'] = true;
+        }
+        return props;
+    }, [showTooltip, customTooltip, infinite])
+
+    const itemStyle = { display: 'flex', alignItems: 'center', flexShrink: 0, width: 'fit-content', margin: '10px 20px 0 0' };
+    const menuStyle = { marginBottom: 20, display: 'flex', flexWrap: 'wrap' };
+
+    return (
+        <>
+            <div style={menuStyle as any}>
+                <div style={itemStyle} id='showTooltip'>
+                    <span>是否show tooltip：</span>
+                    <Switch checked={showTooltip} checkedText="是" uncheckedText="否" onChange={setShowTooltip}/>
+                </div>
+                <div style={itemStyle} id='customTooltip'>
+                    <span>是否custom tooltip：</span>
+                    <Switch checked={customTooltip} checkedText="是" uncheckedText="否" onChange={setCustomTooltip}/>
+                </div>
+                <div style={itemStyle} id='infinite'>
+                    <span >是否无限循环：</span>
+                    <Switch checked={infinite} checkedText="是" uncheckedText="否" onChange={setInfinite}/>
+                </div>
+            </div>
+            <ImagePreview {...props}>
+                {srcList1.map((src, index) => {
+                    return (
+                        <Image 
+                            key={index}
+                            src={src}
+                            width={200}
+                            alt={`lamp${index + 1}`}
+                            data-test={'data-test'}
+                        />
+                )})}
+            </ImagePreview>
+    </>
+)};
+
+
+stories.add('basic image', () => (<BasicPreview />));

packages/semi-ui/image/image.tsx

@@ -173,7 +173,7 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
 
     render() {
         const { src, loadStatus, previewVisible } = this.state;
-        const { width, height, alt, style, className, crossOrigin, preview } = this.props;
+        const { src: picSrc, width, height, alt, style, className, crossOrigin, preview, fallback, placeholder, imageID, ...restProps } = this.props;
         const outerStyle = Object.assign({ width, height }, style);
         const outerCls = cls(prefixCls, className);
         const canPreview = loadStatus === "success" && preview && !this.isInGroup();
@@ -189,6 +189,7 @@ export default class Image extends BaseComponent<ImageProps, ImageStates> {
                 onClick={this.handleClick}
             >
                 <img
+                    {...restProps}
                     src={this.isInGroup() && this.isLazyLoad() ? undefined : src}
                     data-src={src}
                     alt={alt}