{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/show/image","result":{"data":{"current":{"frontmatter":{"title":"Image","order":73,"brief":"Used to display and preview images.","icon":"doc-image"},"fields":{"type":"show"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#loading-failed-placeholder","title":"Loading failed placeholder"},{"url":"#progressive-loading","title":"Progressive loading"},{"url":"#customize-the-preview-image","title":"Customize the preview image"},{"url":"#multi-image-preview","title":"Multi-image preview"},{"url":"#use-the-preview-component-alone","title":"Use the preview component alone"},{"url":"#render-in-the-specified-container","title":"Render in the specified container"},{"url":"#customize-the-bottom-operation-area-of-the-preview","title":"Customize the bottom operation area of the preview"},{"url":"#customize-the-preview-top-display-area","title":"Customize the preview top display area"}]},{"url":"#api-reference","title":"API reference","items":[{"url":"#image","title":"Image"},{"url":"#imagepreview","title":"ImagePreview"},{"url":"#menuprops","title":"MenuProps"}]},{"url":"#design-token","title":"Design Token"}]},"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\": \"en-US\",\n  \"order\": 73,\n  \"category\": \"Show\",\n  \"title\": \"Image\",\n  \"icon\": \"doc-image\",\n  \"brief\": \"Used to display and preview images.\"\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  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Image, ImagePreview supported since v2.20.0\"), 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  }, \"Basic usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can get an image with preview function by specifying the image path through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \", and specify the width and height of the image through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"width\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"height\")), 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  }, \"Loading failed placeholder\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can customize the placeholder for failed loading through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fallback\"), \", which supports string and 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>Failed to load default style</span>\\n        <Image \\n            width={200}\\n            height={200}\\n            src=\\\"https://load-error.jpeg\\\"\\n        />\\n        <br />\\n        <span>Custom loading failed placeholder map</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  }, \"Progressive loading\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Large images can be progressively loaded through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"placeholder\")), 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  }, \"Customize the preview image\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can customize the preview image by setting the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" of the Image component to be different from the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" in the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"preview\"), \" parameter\"), 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  }, \"Multi-image preview\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Use ImagePreview to wrap Image to achieve multi-image preview\"), 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  }, \"Use the preview component alone\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The preview component ImagePreview can be used alone, through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"visible\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onVisibleChange\"), \" to control whether to preview, and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" to pass in the image that can be previewed\"), 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  }, \"Render in the specified container\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can specify the parent DOM of the preview component through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"getPopupContainer\"), \" (you need to specify \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position: relative\"), \"), and the image preview will be rendered into this DOM.  This will change the DOM tree position, but not the view's rendering position.\"), 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  }, \"Customize the bottom operation area of the preview\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The bottom action area of the preview can be customized using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderPreviewMenu\")), 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    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  }, \"If you want to customize the preview bottom operation area based on the default bottom operation area, you can get the default ReactNodes through the menuItems of renderPreviewMenu. menuItems is an array of ReactNodes, and the order is consistent with the content order of the default bottom operation bar area. The menuItems parameter is supported from v2.40.0.\"), 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='I is a custom action'><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  }, \"Customize the preview top display area\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can customize the preview top display area through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderHeader\")), 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' }}>Custom title:{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 reference\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), 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  }, \"Image description\"), 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  }, \"custom style class name\"), 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  }, \"Passthrough to the crossorigin of the native img tag\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'anonymous' \", \"|\", \" '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  }, \"Custom loading failed display content\"), 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  }, \"imgCls\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom style class name, transparently passed to img node\"), 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  }, \"Custom styles, transparently passed to img node\"), 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  }, \"height\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Image display height\"), 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  }, \"onClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Click callback on image\"), 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  }, \"onError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Load error callback\"), 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  }, \"Load success callback\"), 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  }, \"Placeholder content when the image is not loaded\"), 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  }, \"Preview parameter, when false, disable preview\"), 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  }, \"Image acquisition address\"), 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  }, \"custom style\"), 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  }, \"Image display width\"), 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  }, \"Set the name of the downloaded image\"), 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  }, \"Other attributes same as \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes\"\n  }, \"img\"), \"\\u3002Other attributes will be transmitted to the underlying img node.\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), 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  }, \"Adapt to page action button prompts\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"Adapt to the page\\\"\"), 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  }, \"Custom style class name\"), 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  }, \"Whether to show the close button\"), 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  }, \"Hit esc to close the preview\"), 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  }, \"currentIndex\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Controlled property, the current preview image subscript\"), 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  }, \"First display image subscript\"), 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  }, \"Whether to open the preview for the first time\"), 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  }, \"Disable downloads\"), 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  }, \"Download action button prompt\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"Download\\\"\"), 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  }, \"Specify the parent DOM, and the pop-up layer will be rendered into the DOM. For customization, you need to set container \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"position: relative\"), \"  This will change the DOM tree position, but not the view's rendering position.\"), 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  }, \"Whether to loop infinitely\"), 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  }, \"Whether to enable lazy loading\"), 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  }, \"Pass to the rootMargin parameter in options, refer to \", 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  }, \"Whether the mask can be closed by clicking\"), 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  }, \"Next action button prompt\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"Next\\\"\"), 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  }, \"Original size action button tips\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"Original size\\\"\"), 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  }, \"Event triggered by switching pictures\"), 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  }, \"The callback function when the close button is clicked\"), 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  }, \"Image download callback function\"), 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  }, \"Image download error callback\"), 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  }, \"Callback for rotating the image\"), 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  }, \"Callback for switching pictures backwards\"), 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  }, \"Callback for switching the picture forward\"), 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  }, \"The callback function when the image is zoomed in\"), 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  }, \"The callback function when the image is zoomed out\"), 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  }, \"Callback triggered by toggle visible state\"), 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  }, \"Whether to enable preloading\"), 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  }, \"Preloaded step size\"), 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  }, \"Custom preview 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  }, \"Custom preview style class name\"), 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  }, \"Custom preview style\"), 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  }, \"Previous operation button prompt\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"Previous\\\"\"), 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  }, \"custom close icon\"), 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  }, \"custom left icon\"), 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  }, \"custom right icon\"), 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  }, \"Custom render preview top info\"), 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  }, \"Custom render preview bottom menu information\"), 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  }, \"Tips for rotating action buttons\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"Rotate\\\"\"), 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  }, \"Whether to display the bottom operation area prompt\"), 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  }, \"Image list information\"), 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  }, \"Custom style\"), 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  }, \"The length of time of inactivity before hiding the preview action button\"), 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  }, \"Controlled property, whether to preview\"), 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  }, \"Preview layer hierarchy\"), 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  }, \"Zoom in action button tips\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"Zoom in\\\"\"), 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  }, \"Zoom out action button prompt\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\\"Zoom out\\\"\"), 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  }, \"Image reduction/enlargement ratio each time\"), 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  }, \"Set the name of the downloaded image\"), 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  }, \"Properties\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Instructions\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), 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  }, \"Current image page subscript\"), 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  }, \"Whether to disable the left toggle button\"), 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  }, \"Whether to disable the right toggle button\"), 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  }, \"Whether to disable the download button\"), 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  }, \"The maximum ratio of image zoom\"), 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  }, \"The minimum ratio of image scaling\"), 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  }, \"Call function when the image is downloaded\"), 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  }, \"Call function when the image is zoomed in\"), 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  }, \"Call function when the image is zoomed out\"), 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  }, \"Call function to switch the picture forward\"), 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  }, \"Call function to switch the picture backward\"), 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  }, \"Call function to rotate the image counterclockwise\"), 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  }, \"Call function to rotate the image clockwise\"), 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  }, \"Original size or Fit to page button state\"), 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  }, \"Step size of scaling\"), 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  }, \"The total number of images that can be previewed\"), 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  }, \"Current image magnification ratio\"), 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  }, \"Default bottom preview operation area function button ReactNode array\"), 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  }, \"Design Token\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/show/image","next":{"fields":{"slug":"zh-CN/show/image"},"id":"0ea1845b-da10-52c3-a3e0-e3719575e564","frontmatter":{"title":"Image 图片","localeCode":"zh-CN","icon":"doc-image","showNew":null}},"previous":{"fields":{"slug":"zh-CN/show/highlight"},"id":"da7ce3f8-e107-5f64-8b4f-e5116e9becbc","frontmatter":{"title":"Highlight 高亮文本","localeCode":"zh-CN","icon":"doc-highlight","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}