{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/show/image","result":{"data":{"current":{"frontmatter":{"title":"Image 图片","order":73,"brief":"用于展示和预览图片。","icon":"doc-image"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#加载失败的占位图","title":"加载失败的占位图"},{"url":"#渐进加载","title":"渐进加载"},{"url":"#自定义预览图片","title":"自定义预览图片"},{"url":"#多图预览","title":"多图预览"},{"url":"#单独使用预览组件","title":"单独使用预览组件"},{"url":"#渲染在指定容器","title":"渲染在指定容器"},{"url":"#自定义预览底部操作区","title":"自定义预览底部操作区"},{"url":"#自定义预览顶部展示区","title":"自定义预览顶部展示区"}]},{"url":"#api-参考","title":"API 参考","items":[{"url":"#image","title":"Image"},{"url":"#imagepreview","title":"ImagePreview"},{"url":"#menuprops","title":"MenuProps"}]},{"url":"#设计变量","title":"设计变量"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"zh-CN\",\n  \"order\": 73,\n  \"category\": \"展示类\",\n  \"title\": \"Image 图片\",\n  \"icon\": \"doc-image\",\n  \"brief\": \"用于展示和预览图片。\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Image, ImagePreview \\u4ECE v2.20.0 \\u7248\\u672C\\u5F00\\u59CB\\u652F\\u6301\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Image, ImagePreview } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" \\u6307\\u5B9A\\u56FE\\u7247\\u8DEF\\u5F84\\u5373\\u53EF\\u83B7\\u53D6\\u4E00\\u4E2A\\u5177\\u6709\\u9884\\u89C8\\u529F\\u80FD\\u7684\\u56FE\\u7247\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"width\"), \"\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"height\"), \" \\u6307\\u5B9A\\u56FE\\u7247\\u7684\\u5BBD\\u9AD8\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Image } from '@douyinfe/semi-ui';\\n\\n() => (  \\n    <Image \\n        width={360}\\n        height={200}\\n        src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\"\\n    />\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u52A0\\u8F7D\\u5931\\u8D25\\u7684\\u5360\\u4F4D\\u56FE\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fallback\"), \" \\u81EA\\u5B9A\\u4E49\\u52A0\\u8F7D\\u5931\\u8D25\\u7684\\u5360\\u4F4D\\u56FE\\uFF0C\\u8BE5\\u53C2\\u6570\\u7C7B\\u578B\\u652F\\u6301 string \\u548C ReactNode\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Image } from '@douyinfe/semi-ui';\\nimport { IconUploadError } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <div style={{ display: 'flex', alignItem: 'center', flexDirection: 'column' }}>\\n        <span>\\u52A0\\u8F7D\\u5931\\u8D25\\u9ED8\\u8BA4\\u6837\\u5F0F</span>\\n        <Image \\n            width={200}\\n            height={200}\\n            src=\\\"https://load-error.jpeg\\\"\\n        />\\n        <br />\\n        <span>\\u81EA\\u5B9A\\u4E49\\u52A0\\u8F7D\\u5931\\u8D25\\u5360\\u4F4D\\u56FE</span>\\n        <Image \\n            width={200}\\n            height={200}\\n            src=\\\"https://load-error.jpeg\\\"\\n            fallback={<IconUploadError style={{ fontSize: 50 }} />}\\n        />\\n    </div>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6E10\\u8FDB\\u52A0\\u8F7D\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5927\\u56FE\\u53EF\\u901A\\u8FC7\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"placeholder\"), \"\\u5B9E\\u73B0\\u6E10\\u8FDB\\u52A0\\u8F7D\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Image, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const [timestamp, setTimestamp] = React.useState('');\\n    return (  \\n        <>\\n            <Image \\n                width={300}\\n                height={200}\\n                src={`https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract-big.png?${timestamp}`}\\n                placeholder={<Image \\n                    src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract-small.jpeg'\\n                    width={300}\\n                    height={200}\\n                    preview={false}\\n                />}\\n            />\\n            <br />\\n            <Button \\n                theme={'solid'}\\n                onClick={() => {\\n                    setTimestamp(Date.now());\\n                }}\\n                style={{ marginTop: 10 }}\\n            >Reload</Button>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u9884\\u89C8\\u56FE\\u7247\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7\\u8BBE\\u7F6E Image \\u7EC4\\u4EF6\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"preview\"), \" \\u53C2\\u6570\\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" \\u4E0D\\u540C\\u6765\\u81EA\\u5B9A\\u4E49\\u9884\\u89C8\\u56FE\\u7247\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Image } from '@douyinfe/semi-ui';\\n\\n() => {\\n    return ( \\n        <Image\\n            width={300}\\n            height={200}\\n            src={'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract-small.jpeg'}\\n            preview={{\\n                src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract-big.png'\\n            }}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u591A\\u56FE\\u9884\\u89C8\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 ImagePreview \\u5305\\u88F9 Image \\u5373\\u53EF\\u5B9E\\u73B0\\u591A\\u56FE\\u7247\\u9884\\u89C8\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo } from 'react';\\nimport { Image, ImagePreview } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const srcList = useMemo(() => ([\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg\\\",\\n    ]), []);\\n\\n    return ( \\n        <ImagePreview>\\n            {srcList.map((src, index) => {\\n                return (\\n                    <Image \\n                        key={index} \\n                        src={src} \\n                        width={200} \\n                        alt={`lamp${index + 1}`} \\n                        style={{ marginRight: 5 }}\\n                    />\\n                );\\n            })}\\n        </ImagePreview>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5355\\u72EC\\u4F7F\\u7528\\u9884\\u89C8\\u7EC4\\u4EF6\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u9884\\u89C8\\u7EC4\\u4EF6 ImagePreview \\u53EF\\u4EE5\\u5355\\u72EC\\u4F7F\\u7528\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"visible\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onVisibleChange\"), \" \\u63A7\\u5236\\u662F\\u5426\\u9884\\u89C8\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" \\u4F20\\u5165\\u53EF\\u4EE5\\u9884\\u89C8\\u7684\\u56FE\\u7247\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useMemo, useCallback } from 'react';\\nimport { ImagePreview, Button } from '@douyinfe/semi-ui';\\n\\n\\n() => {\\n    const srcList = useMemo(() => ([\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg\\\",\\n    ]), []);\\n\\n    const [visible1, setVisible1] = useState(false);\\n    const [visible2, setVisible2] = useState(false);\\n\\n    const visibleChange1 = useCallback((v) => {\\n        setVisible1(v);\\n    }, []);\\n\\n    const visibleChange2 = useCallback((v) => {\\n        setVisible2(v);\\n    }, []);\\n\\n    const onButton1Click = useCallback((v) => {\\n        setVisible1(true);\\n    }, []);\\n\\n    const onButton2Click = useCallback((v) => {\\n        setVisible2(true);\\n    }, []);\\n\\n    return ( \\n        <>\\n            <Button onClick={onButton1Click}>Preview single Image</Button>\\n            <ImagePreview\\n                src={\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg\\\"}\\n                visible={visible1}\\n                onVisibleChange={visibleChange1}\\n            />\\n            <br /> \\n            <Button onClick={onButton2Click} style={{ marginTop: 20 }}>Preview multiple Images</Button>\\n            <ImagePreview\\n                src={srcList}\\n                visible={visible2}\\n                onVisibleChange={visibleChange2}\\n            />\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6E32\\u67D3\\u5728\\u6307\\u5B9A\\u5BB9\\u5668\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getPopupContainer\"), \" \\u6307\\u5B9A\\u9884\\u89C8\\u7EC4\\u4EF6\\u7684\\u7236\\u7EA7 DOM\\uFF08\\u9700\\u8981\\u6307\\u5B9A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position: relative\"), \")\\uFF0C\\u56FE\\u7247\\u9884\\u89C8\\u5C06\\u4F1A\\u6E32\\u67D3\\u81F3\\u8BE5 DOM \\u4E2D\\u3002\\u8FD9\\u4F1A\\u6539\\u53D8\\u6D6E\\u5C42 DOM \\u6811\\u4F4D\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u6539\\u53D8\\u89C6\\u56FE\\u6E32\\u67D3\\u4F4D\\u7F6E\\u3002\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo } from 'react';\\nimport { Image, ImagePreview } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const srcList = useMemo(() => ([\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg\\\",\\n    ]), []);\\n\\n    return ( \\n        <>\\n            <div \\n                id=\\\"container\\\" \\n                style={{ \\n                    height: 400, \\n                    position: \\\"relative\\\" \\n                }} \\n            >\\n                <ImagePreview\\n                    getPopupContainer={() => {\\n                        const node = document.getElementById(\\\"container\\\");\\n                        return node;\\n                    }}\\n                    style={{\\n                        height: '100%',\\n                        display: 'flex',\\n                        alignItems: 'center',\\n                        justifyContent: 'center',\\n        \\n                    }}\\n                >\\n                    {srcList.map((src, index) => {\\n                        return (\\n                            <Image \\n                                key={index} \\n                                src={src} \\n                                width={200} \\n                                alt={`lamp${index + 1}`}\\n                                style={{ marginRight: 5 }} \\n                            />\\n                        );\\n                    })}\\n                </ImagePreview>\\n            </div>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u9884\\u89C8\\u5E95\\u90E8\\u64CD\\u4F5C\\u533A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderPreviewMenu\"), \" \\u81EA\\u5B9A\\u4E49\\u9884\\u89C8\\u5E95\\u90E8\\u64CD\\u4F5C\\u533A\\u57DF\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo, useCallback } from 'react';\\nimport { Image, ImagePreview, Button } from '@douyinfe/semi-ui';\\nimport { IconChevronLeft, IconChevronRight, IconMinus, IconPlus, IconRotate, IconDownload, IconRealSizeStroked, IconWindowAdaptionStroked } from \\\"@douyinfe/semi-icons\\\";\\n\\n() => {\\n    const srcList = useMemo(() => ([\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg\\\",\\n    ]), []);\\n\\n    const renderPreviewMenu = useCallback((props) => {\\n        const {\\n            ratio,\\n            disabledPrev,\\n            disabledNext,\\n            disableZoomIn,\\n            disableZoomOut,\\n            disableDownload,\\n            onDownload,\\n            onNext,\\n            onPrev,\\n            onRotateLeft,\\n            onRatioClick,\\n            onZoomIn,\\n            onZoomOut,\\n        } = props;\\n        return (\\n            <div \\n                style={{ \\n                    background: \\\"grey\\\", \\n                    height: 40, \\n                    width: 280, \\n                    display: \\\"flex\\\",\\n                    alignItems: \\\"center\\\",\\n                    justifyContent: \\\"space-around\\\",\\n                    borderRadius: 3,\\n                }}\\n            >\\n                <Button\\n                    icon={<IconChevronLeft size=\\\"large\\\" />}\\n                    type=\\\"tertiary\\\"\\n                    onClick={!disabledPrev ? onPrev : undefined}\\n                    disabled={disabledPrev}\\n                />\\n                <Button\\n                    icon={<IconChevronRight size=\\\"large\\\" />}\\n                    type=\\\"tertiary\\\"                     \\n                    onClick={!disabledNext ? onNext : undefined}\\n                    disabled={disabledNext}\\n                />\\n                <Button\\n                    icon={<IconMinus size=\\\"large\\\" />}\\n                    type=\\\"tertiary\\\"\\n                    onClick={!disableZoomOut ? onZoomOut : undefined}\\n                    disabled={disableZoomOut} \\n                />\\n                <Button\\n                    icon={<IconPlus size=\\\"large\\\" />}\\n                    type=\\\"tertiary\\\"\\n                    onClick={!disableZoomIn ? onZoomIn : undefined} \\n                    disabled={disableZoomIn}\\n                />\\n                <Button\\n                    icon={ratio === \\\"adaptation\\\" ? <IconRealSizeStroked size=\\\"large\\\" /> : <IconWindowAdaptionStroked size=\\\"large\\\" />}\\n                    type=\\\"tertiary\\\"\\n                    onClick={onRatioClick} \\n                />\\n                <Button\\n                    icon={<IconRotate size=\\\"large\\\" />}\\n                    type=\\\"tertiary\\\"\\n                    onClick={onRotateLeft}\\n                />\\n                <Button\\n                    icon={<IconDownload size=\\\"large\\\" />}\\n                    type=\\\"tertiary\\\"\\n                    onClick={!disableDownload ? onDownload : undefined}\\n                    disabled={disableDownload}\\n                />\\n            </div>);\\n    }, []);\\n\\n\\n    return ( \\n        <ImagePreview renderPreviewMenu={renderPreviewMenu}>\\n            {srcList.map((src, index) => {\\n                return (\\n                    <Image \\n                        key={index} \\n                        src={src} \\n                        width={200} \\n                        alt={`lamp${index + 1}`} \\n                        style={{ marginRight: 5 }}\\n                    />\\n                );\\n            })}\\n        </ImagePreview>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u679C\\u60F3\\u57FA\\u4E8E\\u9ED8\\u8BA4\\u5E95\\u90E8\\u64CD\\u4F5C\\u533A\\u57DF\\u81EA\\u5B9A\\u4E49\\u9884\\u89C8\\u5E95\\u90E8\\u64CD\\u4F5C\\u533A\\u57DF\\uFF0C \\u53EF\\u4EE5\\u901A\\u8FC7 renderPreviewMenu \\u7684 menuItems \\u83B7\\u53D6\\u9ED8\\u8BA4\\u7684 ReactNode, menuItems \\u662F\\u4E00\\u4E2A ReactNode \\u6570\\u7EC4\\uFF0C\\u987A\\u5E8F\\u548C\\u9ED8\\u8BA4\\u5E95\\u90E8\\u64CD\\u4F5C\\u680F\\u529F\\u80FD\\u533A\\u57DF\\u5185\\u5BB9\\u987A\\u5E8F\\u4E00\\u81F4\\uFF0CmenuItems \\u53C2\\u6570\\u4ECE v2.40.0 \\u5F00\\u59CB\\u652F\\u6301\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo, useCallback } from 'react';\\nimport { Image, ImagePreview, Divider, Tooltip } from '@douyinfe/semi-ui';\\nimport { IconInfoCircle } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const srcList = useMemo(() => ([\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/greenleaf.jpg\\\",\\n    ]), []);\\n\\n    const renderPreviewMenu = useCallback((props) => {\\n        const { menuItems } = props;\\n        const customNode = <Tooltip content='\\u6211\\u662F\\u4E00\\u4E2A\\u81EA\\u5B9A\\u4E49\\u64CD\\u4F5C'><IconInfoCircle size=\\\"large\\\" /></Tooltip>;\\n        return (\\n            <div style={{ display: 'flex', backgroundColor: 'rgba(0, 0, 0, 0.75)', alignItems: 'center', padding: '5px 16px', borderRadius: 4 }}>\\n                {menuItems.slice(0, 3)}\\n                <Divider layout=\\\"vertical\\\" />\\n                {menuItems.slice(3, 7)}\\n                <Divider layout=\\\"vertical\\\" />\\n                {menuItems.slice(7)}\\n                <Divider layout=\\\"vertical\\\" />\\n                {customNode}\\n            </div>\\n        );\\n    }, []);\\n\\n    return (\\n        <>  \\n            <ImagePreview\\n                renderPreviewMenu={renderPreviewMenu}\\n            >\\n                {srcList.map((src, index) => (<Image key={index} src={src} width={200} alt={`lamp${index + 1}`} />))}\\n            </ImagePreview>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u81EA\\u5B9A\\u4E49\\u9884\\u89C8\\u9876\\u90E8\\u5C55\\u793A\\u533A\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderHeader\"), \" \\u53EF\\u4EE5\\u81EA\\u5B9A\\u4E49\\u9884\\u89C8\\u9876\\u90E8\\u5C55\\u793A\\u533A\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React, { useMemo } from 'react';\\nimport { Image, ImagePreview } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const srcList = useMemo(() => ([\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg\\\",\\n        \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/sky.jpg\\\",\\n    ]), []);\\n\\n    return (\\n        <>  \\n            <ImagePreview\\n                renderHeader={(title) => (\\n                    <div \\n                        style={{ width: \\\"100%\\\", height: \\\"100%\\\", display: \\\"flex\\\", alignItems: \\\"center\\\", justifyContent: \\\"center\\\" }}>\\n                        <span style={{ background: \\\"black\\\", padding: '0 10px' }}>\\u81EA\\u5B9A\\u4E49\\u6807\\u9898\\uFF1A{title}</span>\\n                    </div>\\n                )}\\n            >\\n                <div >\\n                    {srcList.map((src, index) => {\\n                        return (\\n                            <Image \\n                                key={index} \\n                                src={src} \\n                                width={200} \\n                                alt={`lamp${index + 1}`} \\n                                preview={{\\n                                    previewTitle: `lamp${index + 1}`,\\n                                }}\\n                                style={{ marginRight: 5 }} \\n                            />\\n                        );\\n                    })}\\n                </div>\\n            </ImagePreview>\\n        </>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API \\u53C2\\u8003\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Image\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"alt\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u50CF\\u63CF\\u8FF0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"crossOrigin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u900F\\u4F20\\u7ED9\\u539F\\u751F img \\u6807\\u7B7E\\u7684 crossorigin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'anonymous'\\uFF5C'use-credentials'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fallback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A0\\u8F7D\\u5931\\u8D25\\u5BB9\\u9519\\u5730\\u5740\\u6216\\u8005\\u81EA\\u5B9A\\u4E49\\u52A0\\u8F7D\\u5931\\u8D25\\u65F6\\u7684\\u663E\\u793A\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u663E\\u793A\\u9AD8\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"imgCls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u7C7B\\u540D\\uFF0C\\u900F\\u4F20\\u7ED9 img \\u8282\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"imgStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\uFF0C\\u900F\\u4F20\\u7ED9 img \\u8282\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u56FE\\u7247\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(event: any) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A0\\u8F7D\\u9519\\u8BEF\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(event: Event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onLoad\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u52A0\\u8F7D\\u6210\\u529F\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(event: Event) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"placeholder\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u672A\\u52A0\\u8F7D\\u65F6\\u5019\\u7684\\u5360\\u4F4D\\u5185\\u5BB9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preview\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9884\\u89C8\\u53C2\\u6570\\uFF0C\\u4E3A false \\u65F6\\u5019\\u7981\\u7528\\u9884\\u89C8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" ImagePreview\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u83B7\\u53D6\\u5730\\u5740\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u663E\\u793A\\u5BBD\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setDownloadName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u56FE\\u7247\\u4E0B\\u8F7D\\u540D\\u79F0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(src: string) => string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.40.0\")))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u5176\\u4ED6\\u652F\\u6301\\u7684\\u5C5E\\u6027\\u540C \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes\"\n  }, \"img\"), \"\\u3002\\u5176\\u4ED6\\u5C5E\\u6027\\u5C06\\u900F\\u4F20\\u81F3\\u5E95\\u5C42\\u7684 img \\u8282\\u70B9\\u3002\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ImagePreview\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"adaptiveTip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9002\\u5E94\\u9875\\u9762\\u64CD\\u4F5C\\u6309\\u94AE\\u63D0\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"\\u9002\\u5E94\\u9875\\u9762\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"closable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u663E\\u793A\\u5173\\u95ED\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"closeOnEsc\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB esc \\u5173\\u95ED\\u9884\\u89C8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"crossOrigin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u900F\\u4F20\\u7ED9\\u9884\\u89C8\\u56FE\\u7247\\u7684\\u539F\\u751F img \\u6807\\u7B7E\\u7684 crossorigin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'anonymous'\\uFF5C'use-credentials'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"currentIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D7\\u63A7\\u5C5E\\u6027\\uFF0C\\u5F53\\u524D\\u9884\\u89C8\\u56FE\\u7247\\u4E0B\\u6807\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultCurrentIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9996\\u6B21\\u5C55\\u793A\\u56FE\\u7247\\u4E0B\\u6807\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultVisible\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9996\\u6B21\\u662F\\u5426\\u5F00\\u542F\\u9884\\u89C8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disableDownload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7981\\u7528\\u4E0B\\u8F7D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"downloadTip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u8F7D\\u64CD\\u4F5C\\u6309\\u94AE\\u63D0\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"\\u4E0B\\u8F7D\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"getPopupContainer\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u7236\\u7EA7 DOM\\uFF0C\\u5F39\\u5C42\\u5C06\\u4F1A\\u6E32\\u67D3\\u81F3\\u8BE5 DOM \\u4E2D\\uFF0C\\u81EA\\u5B9A\\u4E49\\u9700\\u8981\\u8BBE\\u7F6E container \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"position: relative\"), \" \\u8FD9\\u4F1A\\u6539\\u53D8\\u6D6E\\u5C42 DOM \\u6811\\u4F4D\\u7F6E\\uFF0C\\u4F46\\u4E0D\\u4F1A\\u6539\\u53D8\\u89C6\\u56FE\\u6E32\\u67D3\\u4F4D\\u7F6E\\u3002\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => HTMLElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => document.body\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"infinite\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u65E0\\u9650\\u5FAA\\u73AF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"lazyLoad\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u61D2\\u52A0\\u8F7D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"lazyLoadMargin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4F20\\u7ED9 options \\u4E2D\\u7684rootMargin \\u53C2\\u6570\\uFF0C\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API#interfaces\"\n  }, \"Intersection Observer API\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"0px 100px 100px 0px\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maskClosable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u906E\\u7F69\\u662F\\u5426\\u53EF\\u5173\\u95ED\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"nextTip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0B\\u4E00\\u6B65\\u64CD\\u4F5C\\u6309\\u94AE\\u63D0\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"\\u4E0B\\u4E00\\u6B65\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"originTip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u539F\\u59CB\\u5C3A\\u5BF8\\u64CD\\u4F5C\\u6309\\u94AE\\u63D0\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"\\u539F\\u59CB\\u5C3A\\u5BF8\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5207\\u6362\\u56FE\\u7247\\u89E6\\u53D1\\u7684\\u4E8B\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(index: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClose\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u70B9\\u51FB\\u5173\\u95ED\\u6309\\u94AE\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDownload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u4E0B\\u8F7D\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(src: string, index: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDownloadError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u4E0B\\u8F7D\\u9519\\u8BEF\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(src: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"v2.54.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onRotateLeft\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65CB\\u8F6C\\u56FE\\u7247\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(angle: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onNext\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5411\\u540E\\u5207\\u6362\\u56FE\\u7247\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(index: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPrev\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5411\\u524D\\u5207\\u6362\\u56FE\\u7247\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(index: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onZoomIn\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u653E\\u5927\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(zoom: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onZoomOut\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u7F29\\u5C0F\\u65F6\\u7684\\u56DE\\u8C03\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(zoom: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onVisibleChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5207\\u6362\\u53EF\\u89C1\\u72B6\\u6001\\u89E6\\u53D1\\u7684\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(visible: boolean) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preLoad\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5F00\\u542F\\u9884\\u52A0\\u8F7D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"preLoadGap\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9884\\u52A0\\u8F7D\\u7684\\u6B65\\u957F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"previewTitle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u9884\\u89C8 title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"previewCls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u9884\\u89C8\\u6837\\u5F0F\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"previewStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u9884\\u89C8\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prevTip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E0A\\u4E00\\u6B65\\u64CD\\u4F5C\\u6309\\u94AE\\u63D0\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"\\u4E0A\\u4E00\\u6B65\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderCloseIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5173\\u95EDicon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactElement \\uFF5C () => ReactElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.85.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderLeftIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5411\\u5DE6icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactElement \\uFF5C (index) => ReactElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.85.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderRightIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u5411\\u53F3icon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactElement \\uFF5C (index) => ReactElement\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.85.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderHeader\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u9884\\u89C8\\u9876\\u90E8\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(info: ReactNode) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderPreviewMenu\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6E32\\u67D3\\u9884\\u89C8\\u5E95\\u90E8\\u83DC\\u5355\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(props: MenuProps) => ReactNode;\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rotateTip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u65CB\\u8F6C\\u64CD\\u4F5C\\u6309\\u94AE\\u63D0\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"\\u65CB\\u8F6C\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showTooltip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u5C55\\u793A\\u5E95\\u90E8\\u64CD\\u4F5C\\u533A\\u63D0\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u5217\\u8868\\u4FE1\\u606F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u81EA\\u5B9A\\u4E49\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"viewerVisibleDelay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9690\\u85CF\\u9884\\u89C8\\u64CD\\u4F5C\\u6309\\u94AE\\u524D\\u7684\\u65E0\\u64CD\\u4F5C\\u65F6\\u957F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"10000\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"visible\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53D7\\u63A7\\u5C5E\\u6027\\uFF0C\\u662F\\u5426\\u9884\\u89C8\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"zIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9884\\u89C8\\u5C42\\u5C42\\u7EA7\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1070\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"zoomInTip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u653E\\u5927\\u64CD\\u4F5C\\u6309\\u94AE\\u63D0\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"\\u653E\\u5927\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"zoomOutTip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7F29\\u5C0F\\u64CD\\u4F5C\\u6309\\u94AE\\u63D0\\u793A\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"\\u7F29\\u5C0F\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"zoomStep\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u6BCF\\u6B21\\u7F29\\u5C0F/\\u653E\\u5927\\u6BD4\\u4F8B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"0.1\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"setDownloadName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u56FE\\u7247\\u4E0B\\u8F7D\\u540D\\u79F0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(src: string) => string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.40.0\")))), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"MenuProps\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7248\\u672C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"curPage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u56FE\\u7247\\u9875\\u4E0B\\u6807\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabledPrev\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u7528\\u5411\\u5DE6\\u5207\\u6362\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabledNext\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u7528\\u5411\\u53F3\\u5207\\u6362\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disableDownload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u7981\\u7528\\u4E0B\\u8F7D\\u6309\\u94AE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"max\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u7F29\\u653E\\u6700\\u5927\\u6BD4\\u4F8B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"min\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u7F29\\u653E\\u6700\\u5C0F\\u6BD4\\u4F8B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDownload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u4E0B\\u8F7D\\u7684\\u8C03\\u7528\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onZoomIn\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u653E\\u5927\\u65F6\\u7684\\u8C03\\u7528\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onZoomOut\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u56FE\\u7247\\u7F29\\u5C0F\\u65F6\\u7684\\u8C03\\u7528\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPrev\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5411\\u524D\\u5207\\u6362\\u56FE\\u7247\\u7684\\u8C03\\u7528\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onNext\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5411\\u540E\\u5207\\u6362\\u56FE\\u7247\\u7684\\u8C03\\u7528\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onRotateLeft\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9006\\u65F6\\u9488\\u65CB\\u8F6C\\u56FE\\u7247\\u7684\\u8C03\\u7528\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onRotateRight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u987A\\u65F6\\u9488\\u65CB\\u8F6C\\u56FE\\u7247\\u7684\\u8C03\\u7528\\u51FD\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ratio\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u539F\\u59CB\\u5C3A\\u5BF8\\u6216\\u9002\\u5E94\\u9875\\u9762\\u6309\\u94AE\\u72B6\\u6001\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"adaptation\\\" \", \"|\", \" \\\"realSize\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"step\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7F29\\u653E\\u7684\\u6BD4\\u4F8B\\u6B65\\u957F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"totalNum\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u53EF\\u9884\\u89C8\\u7684\\u603B\\u56FE\\u7247\\u6570\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"zoom\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5F53\\u524D\\u56FE\\u7247\\u7F29\\u653E\\u6BD4\\u4F8B\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"menuItems\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u5E95\\u90E8\\u9884\\u89C8\\u64CD\\u4F5C\\u533A\\u57DF\\u529F\\u80FD\\u6309\\u94AE ReactNode \\u6570\\u7EC4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.40.0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/show/image","next":{"fields":{"slug":"en-US/show/cropper"},"id":"9f891138-830a-546f-94ef-f94107a4c7b3","frontmatter":{"title":"Cropper","localeCode":"en-US","icon":"doc-cropper","showNew":null}},"previous":{"fields":{"slug":"en-US/show/image"},"id":"77bcd230-cd90-5620-aee6-b322ddb4baaf","frontmatter":{"title":"Image","localeCode":"en-US","icon":"doc-image","showNew":null}}}},"staticQueryHashes":["1348983216155057","1477422646155057","3245198693155057","417590761155057","63159454155057"]}