图片 - Semi Design Next

代码演示

如何引入

import { Image, ImagePreview } from '@fibrous/semi-ui-react';

基本用法

通过 src 指定图片路径即可获取一个具有预览功能的图片，通过 width，height 指定图片的宽高

代码

import { Image } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    return <Image width={360} height={200} alt="Abstract colorful artwork" src="/assets/root-web-sites/abstract.jpg" />;
}

加载失败的占位图

可通过 fallback 自定义加载失败的占位图，该参数类型支持 string 和 ReactNode

加载失败默认样式

自定义加载失败占位图

代码

import { IconUploadError } from '@fibrous/semi-icons-react';
import { Image } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    return (
        <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
            <span>加载失败默认样式</span>
            <Image width={200} height={200} src="https://load-error.jpeg" alt="加载失败的图片" />
            <br />
            <span>自定义加载失败占位图</span>
            <Image width={200} height={200} src="https://load-error.jpeg" alt="加载失败的图片" fallback={<IconUploadError style={{ fontSize: 50 }} />} />
        </div>
    );
}

渐进加载

大图可通过placeholder实现渐进加载

代码

import React from 'react';
import { Image, Button } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const [timestamp, setTimestamp] = React.useState('');
    return (
        <>
            <Image width={300} height={200} alt="Abstract colorful artwork" src={`/assets/root-web-sites/abstract-big.png?${timestamp}`} placeholder={<Image src="/assets/root-web-sites/abstract-small.jpeg" width={300} height={200} alt="" preview={false} />} />
            <br />
            <Button
                theme="solid"
                onClick={() => {
                    setTimestamp(String(Date.now()));
                }}
                style={{ marginTop: 10 }}
            >
                Reload
            </Button>
        </>
    );
}

自定义预览图片

可以通过设置 Image 组件的 src 和 preview 参数中的 src 不同来自定义预览图片

代码

import { Image } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    return (
        <Image
            width={300}
            height={200}
            alt="Abstract colorful artwork"
            src="/assets/root-web-sites/abstract-small.jpeg"
            preview={{
                src: '/assets/root-web-sites/abstract-big.png',
            }}
        />
    );
}

多图预览

使用 ImagePreview 包裹 Image 即可实现多图片预览

代码

import { useMemo } from 'react';
import { Image, ImagePreview } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'], []);

    return (
        <ImagePreview>
            {srcList.map((src, index) => {
                return <Image key={index} src={src} width={200} alt={`lamp${index + 1}`} style={{ marginRight: 5 }} />;
            })}
        </ImagePreview>
    );
}

单独使用预览组件

预览组件 ImagePreview 可以单独使用，通过 visible 和 onVisibleChange 控制是否预览，通过 src 传入可以预览的图片，通过 previewTitle 设置预览顶部的标题

代码

import { useMemo, useCallback, useState } from 'react';
import { ImagePreview, Button } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'], []);

    const [visible1, setVisible1] = useState(false);
    const [visible2, setVisible2] = useState(false);

    const visibleChange1 = useCallback((v: boolean) => {
        setVisible1(v);
    }, []);

    const visibleChange2 = useCallback((v: boolean) => {
        setVisible2(v);
    }, []);

    const onButton1Click = useCallback(() => {
        setVisible1(true);
    }, []);

    const onButton2Click = useCallback(() => {
        setVisible2(true);
    }, []);

    return (
        <>
            <Button onClick={onButton1Click}>Preview single Image</Button>
            <ImagePreview src="/assets/root-web-sites/sky.jpg" visible={visible1} onVisibleChange={visibleChange1} />
            <br />
            <Button onClick={onButton2Click} style={{ marginTop: 20 }}>
                Preview multiple Images
            </Button>
            <ImagePreview src={srcList} previewTitle="Scenery" visible={visible2} onVisibleChange={visibleChange2} />
        </>
    );
}

渲染在指定容器

可以通过 getPopupContainer 指定预览组件的父级 DOM（需要指定 position: relative)，图片预览将会渲染至该 DOM 中。这会改变浮层 DOM 树位置，但不会改变视图渲染位置。

容器不是 document.body 时（包括只在 ConfigProvider 上设置 getPopupContainer），预览为非模态：不输出 aria-modal，不锁定 Tab，也不锁定页面滚动。getPopupContainer 返回 document.body 与不传相同。

代码

import { useMemo } from 'react';
import { Image, ImagePreview } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'], []);

    return (
        <>
            <div
                id="container"
                style={{
                    height: 400,
                    position: 'relative',
                }}
            >
                <ImagePreview
                    getPopupContainer={() => {
                        const node = document.getElementById('container') as HTMLElement;
                        return node;
                    }}
                    style={{
                        height: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                    }}
                >
                    {srcList.map((src, index) => {
                        return <Image key={index} src={src} width={200} alt={`lamp${index + 1}`} style={{ marginRight: 5 }} />;
                    })}
                </ImagePreview>
            </div>
        </>
    );
}

自定义预览底部操作区

可以使用 renderPreviewMenu 自定义预览底部操作区域

代码

import { useMemo, useCallback } from 'react';
import { IconChevronLeft, IconChevronRight, IconMinus, IconPlus, IconRotate, IconDownload, IconRealSizeStroked, IconWindowAdaptionStroked } from '@fibrous/semi-icons-react';
import { Image, ImagePreview, Button, type ImagePreviewMenuProps } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'], []);

    const renderPreviewMenu = useCallback(({ ratio, disabledPrev, disabledNext, disabledZoomIn, disabledZoomOut, disableDownload, onDownload, onNext, onPrev, onRotateLeft, onRatioClick, onZoomIn, onZoomOut }: ImagePreviewMenuProps) => {
        return (
            <div
                style={{
                    background: 'grey',
                    height: 40,
                    width: 280,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-around',
                    borderRadius: 3,
                }}
            >
                <Button aria-label="上一张" icon={<IconChevronLeft size="large" />} type="tertiary" onClick={onPrev} disabled={disabledPrev} />
                <Button aria-label="下一张" icon={<IconChevronRight size="large" />} type="tertiary" onClick={onNext} disabled={disabledNext} />
                <Button aria-label="缩小" icon={<IconMinus size="large" />} type="tertiary" onClick={onZoomOut} disabled={disabledZoomOut} />
                <Button aria-label="放大" icon={<IconPlus size="large" />} type="tertiary" onClick={onZoomIn} disabled={disabledZoomIn} />
                <Button aria-label={ratio === 'adaptation' ? '原始尺寸' : '适应页面'} icon={ratio === 'adaptation' ? <IconRealSizeStroked size="large" /> : <IconWindowAdaptionStroked size="large" />} type="tertiary" onClick={onRatioClick} />
                <Button aria-label="旋转" icon={<IconRotate size="large" />} type="tertiary" onClick={onRotateLeft} />
                <Button aria-label="下载" icon={<IconDownload size="large" />} type="tertiary" onClick={onDownload} disabled={disableDownload} />
            </div>
        );
    }, []);

    return (
        <ImagePreview renderPreviewMenu={renderPreviewMenu}>
            {srcList.map((src, index) => {
                return <Image key={index} src={src} width={200} alt={`lamp${index + 1}`} style={{ marginRight: 5 }} />;
            })}
        </ImagePreview>
    );
}

如果想基于默认底部操作区域自定义预览底部操作区域，可以通过 renderPreviewMenu 的 menuItems 获取默认的 ReactNode, menuItems 是一个 ReactNode 数组，顺序和默认底部操作栏功能区域内容顺序一致

代码

import { useMemo, useCallback } from 'react';
import { IconInfoCircle } from '@fibrous/semi-icons-react';
import { Image, ImagePreview, Divider, Tooltip, type ImagePreviewMenuProps } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'], []);

    const renderPreviewMenu = useCallback(({ menuItems = [] }: ImagePreviewMenuProps) => {
        const customNode = (
            <Tooltip content="我是一个自定义操作">
                <IconInfoCircle size="large" />
            </Tooltip>
        );
        return (
            <div
                style={{
                    display: 'flex',
                    backgroundColor: 'rgba(0, 0, 0, 0.75)',
                    alignItems: 'center',
                    padding: '5px 16px',
                    borderRadius: 4,
                }}
            >
                {menuItems.slice(0, 3)}
                <Divider layout="vertical" />
                {menuItems.slice(3, 7)}
                <Divider layout="vertical" />
                {menuItems.slice(7)}
                <Divider layout="vertical" />
                {customNode}
            </div>
        );
    }, []);

    return (
        <>
            <ImagePreview renderPreviewMenu={renderPreviewMenu}>
                {srcList.map((src, index) => (
                    <Image key={index} src={src} width={200} alt={`lamp${index + 1}`} />
                ))}
            </ImagePreview>
        </>
    );
}

自定义预览顶部展示区

通过 renderHeader 可以自定义预览顶部展示区

代码

import { useMemo } from 'react';
import { Image, ImagePreview } from '@fibrous/semi-ui-react';

export default function ImageDemo() {
    const srcList = useMemo(() => ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg'], []);

    return (
        <>
            <ImagePreview
                renderHeader={(title) => (
                    <div
                        style={{
                            width: '100%',
                            height: '100%',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                        }}
                    >
                        <span style={{ background: 'black', padding: '0 10px' }}>自定义标题：{title}</span>
                    </div>
                )}
            >
                <div>
                    {srcList.map((src, index) => {
                        return (
                            <Image
                                key={index}
                                src={src}
                                width={200}
                                alt={`lamp${index + 1}`}
                                preview={{
                                    previewTitle: `lamp${index + 1}`,
                                }}
                                style={{ marginRight: 5 }}
                            />
                        );
                    })}
                </div>
            </ImagePreview>
        </>
    );
}

API 参考

Image

Props

属性	说明	类型	默认值
alt	图像描述，同时作为可预览缩略图的读屏名称。	`string`	-
children	组件不渲染该属性，设置后无效。	`ReactNode`	-
className	缩略图根元素的类名。	`string`	-
crossOrigin	透传给原生 img 标签的 crossOrigin，可选 `anonymous` 或 `use-credentials`。设置后预览图片也使用同一值，未设置时预览图片取 `preview.crossOrigin`。	`'anonymous' \| 'use-credentials'`	-
fallback	加载失败时显示的内容：字符串作为容错图片地址，React 元素原样显示；未设置时显示默认的加载失败图标。	`string \| ReactNode`	-
height	图片显示高度，数值按 px 处理。	`string \| number`	-
imgCls	自定义样式类名，透传给 img 节点。	`string`	-
imgStyle	自定义样式，透传给 img 节点。	`React.CSSProperties`	-
onClick	点击图片时调用，绑定在内部的 img 节点上。	`Type`	-
placeholder	图片加载成功前显示的占位内容；未设置时显示骨架屏。	`ReactNode`	-
preview	预览参数，为 false 时禁用预览。对象接受 ImagePreview 的属性，但不含 lazyLoad、lazyLoadMargin、children、className 与 style（预览样式请用 previewCls、previewStyle）。	`boolean \| ImagePreviewProps`	`true`
ref	内部 img 元素的引用。	`Type`	-
setDownloadName	设置图片下载文件名，接收图片地址并返回文件名。	`Type`	-
src	图片获取地址。	`string`	-
style	缩略图根元素的样式。	`CSSProperties`	-
width	图片显示宽度，数值按 px 处理。	`string \| number`	-

onLoad、onError 分别在图片加载成功、失败时调用，参数为 SyntheticEvent<HTMLImageElement>；其他原生属性（如 data-*、aria-*）透传至底层的 img 节点。

单个 Image 的 preview 对象接受下表 ImagePreview 的属性，但不含 lazyLoad、lazyLoadMargin、children、className、style（预览样式请用 previewCls、previewStyle）。preview.src 为数组时，切换图片后回到「适应页面」。

ImagePreview

Props

属性	说明	类型	默认值
adaptiveTip	适应页面操作按钮的提示；未设置时取语言包的文案。	`string`	-
children	要预览的 Image 组件。	`ReactNode`	-
className	分组根 div 的类名。	`string`	-
closable	是否显示关闭按钮。	`boolean`	`true`
closeOnEsc	按下 Esc 键时是否关闭预览，默认 `true`。	`boolean`	-
crossOrigin	透传给预览图片的原生 img 标签的 crossOrigin，可选 `anonymous` 或 `use-credentials`。	`'anonymous' \| 'use-credentials'`	-
currentIndex	受控属性，当前预览图片下标。	`number`	-
defaultCurrentIndex	首次展示图片下标。	`number`	-
defaultVisible	首次是否开启预览。	`boolean`	-
disableDownload	禁用下载；没有当前图片（`src` 为空列表）时下载按钮同样禁用。	`boolean`	-
downloadTip	下载操作按钮的提示；未设置时取语言包的文案。	`string`	-
getPopupContainer	指定预览渲染的父级 DOM，返回 `document.body` 与不传相同。容器不是 `document.body` 时预览为非模态，自定义容器需要设置 `position: relative`。	`Type`	-
infinite	是否无限循环切换，默认 `false`。	`boolean`	-
initialZoom	预览图片初始缩放比例，仅在首次打开或切换到该图片时生效一次，会被 minZoom 与 maxZoom 限制。	`number`	-
lazyLoad	是否开启懒加载，相对视口判断；设了 overflow 的滚动祖先仍会裁剪。	`boolean`	`true`
lazyLoadMargin	传给 IntersectionObserver 的 rootMargin，相对视口计算。	`string`	`"0px 100px 100px 0px"`
maskClosable	点击遮罩是否可关闭预览，默认 `true`。	`boolean`	-
maxZoom	预览图片最大缩放比例，如 `5` 表示 500%，默认 `5`。	`number`	-
minZoom	预览图片最小缩放比例，如 `0.1` 表示 10%，默认 `0.1`。	`number`	-
nextTip	下一张操作按钮的提示，同时作为读屏名称；未设置时取语言包的文案。	`string`	-
onChange	切换图片时调用，参数为新的图片下标。	`Type`	-
onClose	点击关闭按钮或按 Esc 关闭预览时调用；点击遮罩关闭只触发 onVisibleChange，不调用 onClose。	`Type`	-
onDownload	下载图片时调用，参数为图片地址与下标。	`Type`	-
onDownloadError	图片下载失败时调用，参数为图片地址。	`Type`	-
onNext	向后切换图片时调用，参数为切换后的下标。	`Type`	-
onPrev	向前切换图片时调用，参数为切换后的下标。	`Type`	-
onRatioChange	切换原始尺寸与适应页面时调用，参数为 `'adaptation'` 或 `'realSize'`。	`Type`	-
onRotateLeft	逆时针旋转图片时调用，参数为当前旋转角度。	`Type`	-
onVisibleChange	可见状态变化时调用，参数为是否可见。	`Type`	-
onZoomIn	图片放大时调用，参数为放大后的缩放比例。	`Type`	-
onZoomOut	图片缩小时调用，参数为缩小后的缩放比例。	`Type`	-
originTip	原始尺寸操作按钮的提示；未设置时取语言包的文案。	`string`	-
preLoad	是否开启预加载，默认 `true`。	`boolean`	-
preLoadGap	预加载的步长，默认 `2`。	`number`	-
previewCls	自定义预览层的类名。	`string`	-
previewStyle	自定义预览层的样式。	`React.CSSProperties`	-
previewTitle	预览顶部标题，同时作为预览对话框的读屏名称；组内图片的 `preview.previewTitle` 优先。	`ReactNode`	-
prevTip	上一张操作按钮的提示，同时作为读屏名称；未设置时取语言包的文案。	`string`	-
ref	分组根 div 的引用。	`Type`	-
renderCloseIcon	自定义关闭图标，可以是 React 元素，或返回 React 元素的函数。	`Type`	-
renderHeader	自定义渲染预览顶部信息，接收当前标题，返回要显示的内容。	`Type`	-
renderLeftIcon	自定义向左切换图标，可以是 React 元素，或接收当前下标并返回 React 元素的函数。	`Type`	-
renderPreviewMenu	自定义渲染预览底部操作区，接收 MenuProps，返回要显示的内容。	`Type`	-
renderRightIcon	自定义向右切换图标，可以是 React 元素，或接收当前下标并返回 React 元素的函数。	`Type`	-
rotateTip	旋转操作按钮的提示；未设置时取语言包的文案。	`string`	-
setDownloadName	设置图片下载文件名，接收图片地址并返回文件名。	`Type`	-
showTooltip	是否展示底部操作区的提示，默认 `false`。	`boolean`	-
src	要预览的图片地址列表。包裹 Image 时与各 Image 登记的预览图合并，src 中的图片排在前面。	`string \| string[]`	`[]`
style	分组根 div 的样式。	`CSSProperties`	-
viewerVisibleDelay	隐藏预览操作按钮前的无操作时长，单位为毫秒，默认 `10000`。	`number`	-
visible	受控属性，是否预览。	`boolean`	-
zIndex	预览层层级，默认 `1070`。	`number`	-
zoomInTip	放大操作按钮的提示；未设置时取语言包的文案。	`string`	-
zoomOutTip	缩小操作按钮的提示；未设置时取语言包的文案。	`string`	-
zoomStep	每次缩小或放大的倍数，如 `0.1` 表示每次 10%，默认 `0.1`。	`number`	-

其他原生属性（如 aria-label、aria-labelledby）落在分组的根 div 上；传入 aria-label 或 aria-labelledby 且未传 role 时根元素带 role="group"。预览对话框渲染到 getPopupContainer（默认 document.body）中，名称来自 previewTitle，没有标题时来自语言包。

MenuProps

min、max、step、zoom 是百分比数值（如 min 为 10 表示 10%，step 为 10 表示每次 10%），与 ImagePreview 的 minZoom、maxZoom、zoomStep、initialZoom（倍数，如 0.1、5）单位不同。

属性	说明	类型
curPage	当前图片页下标	number
disabledPrev	是否禁用向左切换按钮	boolean
disabledNext	是否禁用向右切换按钮	boolean
disabledZoomIn	是否已放大到最大比例（放大按钮禁用）	boolean
disabledZoomOut	是否已缩小到最小比例（缩小按钮禁用）	boolean
disableDownload	是否禁用下载按钮	boolean
max	图片缩放最大比例（百分比）	number
min	图片缩放最小比例（百分比）	number
onDownload	图片下载的调用函数	() => void
onZoomIn	图片放大时的调用函数	() => void
onZoomOut	图片缩小时的调用函数	() => void
onRatioClick	切换原始尺寸与适应页面的调用函数	() => void
onPrev	向前切换图片的调用函数	() => void
onNext	向后切换图片的调用函数	() => void
onRotateLeft	逆时针旋转图片的调用函数	() => void
onRotateRight	顺时针旋转图片的调用函数	() => void
ratio	原始尺寸或适应页面按钮状态	"adaptation" \| "realSize"
step	缩放的比例步长（百分比）	number
totalNum	可预览的总图片数	number
zoom	当前图片缩放比例（百分比）	number
menuItems	默认底部预览操作区域功能按钮 ReactNode 数组	ReactNode[]

Accessibility

ARIA

预览渲染在 document.body（默认）时是 role="dialog"、aria-modal="true" 的模态对话框；渲染到自定义容器（getPopupContainer 返回其他元素，含 ConfigProvider 设置的容器）时是非模态对话框，不输出 aria-modal。有标题（previewTitle，或组内图片的 preview.previewTitle）时由标题命名，否则以语言包的「预览」作为名称
关闭、左右切换箭头，以及底部的上一张、下一张、缩小、放大、原始尺寸 / 适应页面、旋转、下载都是原生 button，读屏名称取自对应的 prevTip、nextTip 等属性，未设置时取自语言包；缩放滑块的名称是语言包的「缩放」，aria-valuetext 为当前百分比
到达首张、末张或缩放上下限时，底部对应按钮带 aria-disabled="true"，仍可聚焦，焦点不会丢失。没有当前图片（src 为空列表）时下载按钮同样禁用
底部页码带 aria-live="polite"，切换图片时读屏会读出新的位置
开启预览且图片加载成功后，Image 缩略图的根元素是 role="button"、tabindex="0"、aria-haspopup="dialog" 的可聚焦按钮，名称取自图片的 alt；preview 为 false 或图片未加载成功时不可聚焦。关闭预览后焦点回到缩略图。ImagePreview 分组内的缩略图鼠标可点开，键盘同样可以：加载中或加载失败时也带按钮角色、可聚焦，Enter 或空格打开分组预览
预览图的 alt 取自对应缩略图的 alt（ImagePreview 的 src 数组没有 alt，为空字符串）

键盘交互

焦点在缩略图上时，Enter 或空格打开预览
打开预览后焦点移入预览层。模态预览中 Tab 与 Shift + Tab 在预览层内的控件间循环，关闭后焦点回到打开前聚焦的元素；渲染到自定义容器的非模态预览不锁定 Tab，关闭时只有焦点仍在预览内或落在 body 上才回到打开前聚焦的元素，焦点已移到页面其他位置时保持不变
Enter 或空格触发聚焦的按钮
← 与 → 切换上一张、下一张，RTL（ConfigProvider direction="rtl"）下左右互换。到首张或末张时与按钮一致：infinite 为 true 时循环，否则不切换
焦点在输入框、文本域、下拉框或可编辑元素中（例如自定义页脚里的输入框），或同时按下 Alt、Ctrl、Meta、Shift 时，← 与 → 不切换图片；缩放滑块聚焦时 ← 与 → 调整缩放比例
Esc 关闭预览（closeOnEsc 为 false 时不关闭）
操作区因 viewerVisibleDelay 隐藏后，按键或焦点移到操作区上会重新显示；焦点停在操作区时不再自动隐藏

设计变量

下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。

Sass 变量	值	用法
$transform_rotate-image_preview_spinner	var(--semi-transform_rotate-clockwise360deg)	预览图像加载spin旋转角度
$transform_scale3d-image_preview_image_img	1, 1, 1	预览图片放大
$transform_rotate-image_preview_image_img	var(--semi-transform_rotate-none)	预览图片旋转角度
$transition_duration-image_preview	500ms	预览图片透明度变化动画时间
$transform_rotate-image_preview_icon_rtl	var(--semi-transform_rotate-clockwise180deg)	rtl模式下向前/向后切换图片按钮旋转角度
$spacing-image_preview_icon-x	24px	图像预览中部左右调节icon与页面距离
$spacing-image_preview_header-paddingY	0	图像预览header部分上下内边距
$spacing-image_preview_header-paddingX	24px	图像预览header部分左右内边距
$spacing-image_preview_footer-paddingY	0	图像预览footer操作区部分上下内边距
$spacing-image_preview_footer-paddingX	16px	图像预览footer操作区部分左右内边距
$spacing-image_preview_footer_page-marginY	0	图像预览footer操作区图像页数据上下内边距
$spacing-image_preview_footer_page-marginX	12px	图像预览footer操作区图像页数据左右内边距
$spacing-image_preview_footer_slider-paddingY	0	图像预览footer操作区slider上下内边距
$spacing-image_preview_footer_slider-paddingX	16px	图像预览footer操作区slider左右内边距
$spacing-image_preview_footer_slider_handle-marginTop	8px	图像预览footer操作区slider的滑块上外边距
$spacing-image_preview_footer_divider-marginY	0	图像预览footer操作区slider的分割线上下外边距
$spacing-image_preview_footer_divider-marginX	16px	图像预览footer操作区slider的分割线左右外边距
$spacing-image_preview_footer_gap-marginLeft	16px	图像预览footer操作区icon的左外边距
$width-image_preview_footer_slider	132px	图像预览footer操作区slider宽度
$width-image_preview_footer_slider_handle	16px	图像预览footer操作区滑块宽度
$width-image_preview_icon	40px	图像预览footer操作区icon宽度
$width-image_preview_header_close	30px	图像预览header部分的关闭热区宽度
$height-image_preview_header	60px	图像预览header部分高度
$height-image_preview_footer	48px	图像预览footer部分高度
$height-image_preview_footer_slider	2px	图像预览footer中slider高度
$height-image_preview_footer_slider_handle	16px	图像预览footer中slider的滑块高度
$height-image_preview_icon	40px	图像预览footer操作区icon高度
$height-image_preview_header_close	30px	图像预览header部分的关闭热区高度
$radius-image	var(--semi-border-radius-small)	图像圆角
$radius-image_preview_footer	var(--semi-border-radius-medium)	图像预览footer操作区圆角
$color-image_status-bg	var(--semi-color-fill-0)	图像加载失败背景颜色
$color-image_status	var(--semi-color-disabled-text)	图像状态加载失败 icon 颜色
$color-image_preview_icon	var(--semi-color-white)	图像预览中部左右icon背景色
$color-image_preview_header	var(--semi-color-white)	图像预览header文字颜色
$color-image_preview_footer_icon	var(--semi-color-white)	图像预览footer中icon颜色
$color-image_preview_footer_slider_rail	var(--semi-color-white)	图像预览footer中slider滑轨颜色
$color-image_preview_disabled	rgba(249, 249, 249, 0.35)	图像预览禁用颜色
$color-image_preview_icon-bg	rgba(0, 0, 0, 0.75)	图像预览中部icon背景色
$color-image_header_close-bg	rgba(0, 0, 0, 0.75)	图像预览header的关闭icon的hover背景色
$color-image_preview_footer-bg	rgba(0, 0, 0, 0.75)	图像预览footer部分背景色
$color-image-preview_divider-bg	rgba(255, 255, 255, 0.5)	图像预览footer中的分割线背景色
$color-image_preview_image_spin	#ccc	图像预览的加载状态颜色