组件
    展示类

    图片

    用于展示和预览图片。

    代码演示

    如何引入

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

    基本用法

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

    Abstract colorful artwork
    代码
    import { Image } from '@fibrous/semi-ui-solid';

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

    加载失败的占位图

    fallback 接收字符串或 JSX 元素：字符串是加载失败时显示的图片地址，JSX 元素原样显示；未设置时显示默认的加载失败图标

    加载失败默认样式
    加载失败的图片

    自定义加载失败占位图
    加载失败的图片
    代码
    import { IconUploadError } from '@fibrous/semi-icons-solid';
import { Image } from '@fibrous/semi-ui-solid';

export default function ImageDemo() {
    return (
        <div style={{ display: 'flex', 'align-items': 'center', 'flex-direction': '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={{ 'font-size': '50px' }} />} />
        </div>
    );
}

    渐进加载

    大图可通过 placeholder 实现渐进加载，传入的 JSX 元素在图片加载成功前显示

    Abstract colorful artwork

    代码
    import { createSignal } from 'solid-js';
import { Button, Image } from '@fibrous/semi-ui-solid';

export default function ImageDemo() {
    const [timestamp, setTimestamp] = createSignal('');
    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={{ 'margin-top': '10px' }}
            >
                Reload
            </Button>
        </>
    );
}

    自定义预览图片

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

    Abstract colorful artwork
    代码
    import { Image } from '@fibrous/semi-ui-solid';

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 即可实现多图片预览

    lamp1
    lamp2
    lamp3
    lamp4
    代码
    import { Index } from 'solid-js';
import { Image, ImagePreview } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'];

export default function ImageDemo() {
    return (
        <ImagePreview>
            <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} style={{ 'margin-right': '5px' }} />}</Index>
        </ImagePreview>
    );
}

    单独使用预览组件

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


    代码
    import { createSignal } from 'solid-js';
import { Button, ImagePreview } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg', '/assets/root-web-sites/colorful.jpg'];

export default function ImageDemo() {
    const [visible1, setVisible1] = createSignal(false);
    const [visible2, setVisible2] = createSignal(false);

    return (
        <>
            <Button onClick={() => setVisible1(true)}>Preview single Image</Button>
            <ImagePreview src="/assets/root-web-sites/sky.jpg" visible={visible1()} onVisibleChange={(visible) => setVisible1(visible)} />
            <br />
            <Button onClick={() => setVisible2(true)} style={{ 'margin-top': '20px' }}>
                Preview multiple Images
            </Button>
            <ImagePreview src={srcList} previewTitle="Scenery" visible={visible2()} onVisibleChange={(visible) => setVisible2(visible)} />
        </>
    );
}

    渲染在指定容器

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

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

    lamp1
    lamp2
    lamp3
    代码
    import { Index } from 'solid-js';
import { Image, ImagePreview } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'];

export default function ImageDemo() {
    return (
        <div id="container" style={{ height: '400px', position: 'relative' }}>
            <ImagePreview
                getPopupContainer={() => {
                    const node = document.getElementById('container') as HTMLElement;
                    return node;
                }}
                style={{ height: '100%', display: 'flex', 'align-items': 'center', 'justify-content': 'center' }}
            >
                <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} style={{ 'margin-right': '5px' }} />}</Index>
            </ImagePreview>
        </div>
    );
}

    自定义预览底部操作区

    可以使用 renderPreviewMenu 自定义预览底部操作区域，它接收下方 MenuProps 的值并返回 JSX 元素。ImagePreview 包裹的 Image 使用 ImagePreview 的 renderPreviewMenu；单独使用的 Image 通过 preview 对象传入同名属性

    lamp1
    lamp2
    lamp3
    代码
    import { Index } from 'solid-js';
import { IconChevronLeft, IconChevronRight, IconDownload, IconMinus, IconPlus, IconRealSizeStroked, IconRotate, IconWindowAdaptionStroked } from '@fibrous/semi-icons-solid';
import { Button, Image, ImagePreview, type ImagePreviewMenuProps } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'];

// the preview calls the renderer once and the menu's fields are getters, so each JSX expression reads them live
function renderPreviewMenu(menu: ImagePreviewMenuProps) {
    return (
        <div style={{ background: 'grey', height: '40px', width: '280px', display: 'flex', 'align-items': 'center', 'justify-content': 'space-around', 'border-radius': '3px' }}>
            <Button aria-label="上一张" icon={<IconChevronLeft size="large" />} type="tertiary" onClick={menu.onPrev} disabled={menu.disabledPrev} />
            <Button aria-label="下一张" icon={<IconChevronRight size="large" />} type="tertiary" onClick={menu.onNext} disabled={menu.disabledNext} />
            <Button aria-label="缩小" icon={<IconMinus size="large" />} type="tertiary" onClick={menu.onZoomOut} disabled={menu.disabledZoomOut} />
            <Button aria-label="放大" icon={<IconPlus size="large" />} type="tertiary" onClick={menu.onZoomIn} disabled={menu.disabledZoomIn} />
            <Button aria-label={menu.ratio === 'adaptation' ? '原始尺寸' : '适应页面'} icon={menu.ratio === 'adaptation' ? <IconRealSizeStroked size="large" /> : <IconWindowAdaptionStroked size="large" />} type="tertiary" onClick={menu.onRatioClick} />
            <Button aria-label="旋转" icon={<IconRotate size="large" />} type="tertiary" onClick={menu.onRotateLeft} />
            <Button aria-label="下载" icon={<IconDownload size="large" />} type="tertiary" onClick={menu.onDownload} disabled={menu.disableDownload} />
        </div>
    );
}

export default function ImageDemo() {
    return (
        <ImagePreview renderPreviewMenu={renderPreviewMenu}>
            <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} style={{ 'margin-right': '5px' }} />}</Index>
        </ImagePreview>
    );
}

    如果想基于默认底部操作区域自定义预览底部操作区域，可以通过 renderPreviewMenu 的 menuItems 参数获取默认各项的 JSX 元素数组，顺序依次为上一张、页码、下一张、缩小、缩放滑块、放大、原始尺寸 / 适应页面、旋转、下载，可按任意位置渲染。

    lamp1
    lamp2
    lamp3
    代码
    import { Index } from 'solid-js';
import { IconInfoCircle } from '@fibrous/semi-icons-solid';
import { Divider, Image, ImagePreview, Tooltip, type ImagePreviewMenuProps } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg', '/assets/root-web-sites/greenleaf.jpg'];

// the preview calls the renderer once and the menu items stay live, so the JSX reads them directly
function renderPreviewMenu(menu: ImagePreviewMenuProps) {
    return (
        <div style={{ display: 'flex', 'background-color': 'rgba(0, 0, 0, 0.75)', 'align-items': 'center', padding: '5px 16px', 'border-radius': '4px' }}>
            {menu.menuItems?.slice(0, 3)}
            <Divider layout="vertical" />
            {menu.menuItems?.slice(3, 7)}
            <Divider layout="vertical" />
            {menu.menuItems?.slice(7)}
            <Divider layout="vertical" />
            <Tooltip content="我是一个自定义操作">
                <IconInfoCircle size="large" />
            </Tooltip>
        </div>
    );
}

export default function ImageDemo() {
    return (
        <ImagePreview renderPreviewMenu={renderPreviewMenu}>
            <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} />}</Index>
        </ImagePreview>
    );
}

    自定义预览顶部展示区

    通过 renderHeader 可以自定义预览顶部展示区，它接收当前标题（JSX 元素）并返回新的 JSX 元素

    lamp1
    lamp2
    代码
    import { Index } from 'solid-js';
import { Image, ImagePreview } from '@fibrous/semi-ui-solid';

const srcList = ['/assets/root-web-sites/abstract.jpg', '/assets/root-web-sites/sky.jpg'];

export default function ImageDemo() {
    return (
        <ImagePreview
            renderHeader={(title) => (
                <div style={{ width: '100%', height: '100%', display: 'flex', 'align-items': 'center', 'justify-content': 'center' }}>
                    <span style={{ background: 'black', padding: '0 10px' }}>自定义标题：{title}</span>
                </div>
            )}
        >
            <div>
                <Index each={srcList}>{(src, index) => <Image src={src()} width={200} alt={`lamp${index + 1}`} preview={{ previewTitle: `lamp${index + 1}` }} style={{ 'margin-right': '5px' }} />}</Index>
            </div>
        </ImagePreview>
    );
}

    API 参考

    Image

    Props

    属性说明类型默认值
    alt图像描述，同时作为可预览缩略图的读屏名称。string-
    crossOrigin透传给原生 img 标签的 crossorigin。'anonymous' | 'use-credentials'-
    fallback加载失败时显示的内容：字符串作为容错图片地址，JSX 元素原样显示；未设置时显示默认的加载失败图标。JSX.Element-
    height图片显示高度，数值按 px 处理。string | number-
    imgCls自定义样式类名，透传给 img 节点。string-
    imgStyle自定义样式，透传给 img 节点，可以是样式对象或字符串。JSX.CSSProperties | string-
    onError图片加载失败时触发。TypeJSX.EventHandlerUnion<HTMLImageElement, Event>-
    onLoad图片加载成功时触发。TypeJSX.EventHandlerUnion<HTMLImageElement, Event>-
    placeholder图片未加载成功时的占位内容。JSX.Element-
    preview预览配置，为 false 时禁用预览。对象接受 ImagePreview 的属性，但不含 lazyLoad、lazyLoadMargin、children、class 与 style（预览样式请用 previewCls、previewStyle）。boolean | ImagePreviewPropstrue
    setDownloadName设置图片下载名称。Type(src: string) => string-
    src图片获取地址。string-
    style缩略图根元素的自定义样式，可以是样式对象（键用 kebab-case）或字符串。JSX.CSSProperties | string-
    width图片显示宽度，数值按 px 处理。string | number-

    class、style 落在缩略图的根元素上；ref、id、aria-* 与原生事件（如 onClick）落在内部的 img 上。

    ImagePreview

    Props

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

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

    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默认底部预览操作区域各项的 JSX 元素数组，可原样渲染JSX.Element[]

    字段实时读取：在 JSX 表达式里直接读取 menu.disabledPrev 等字段，不要解构 menu 参数。

    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_spinnervar(--semi-transform_rotate-clockwise360deg)预览图像加载spin旋转角度
    $transform_scale3d-image_preview_image_img1, 1, 1预览图片放大
    $transform_rotate-image_preview_image_imgvar(--semi-transform_rotate-none)预览图片旋转角度
    $transition_duration-image_preview500ms预览图片透明度变化动画时间
    $transform_rotate-image_preview_icon_rtlvar(--semi-transform_rotate-clockwise180deg)rtl模式下向前/向后切换图片按钮旋转角度
    $spacing-image_preview_icon-x24px图像预览中部左右调节icon与页面距离
    $spacing-image_preview_header-paddingY0图像预览header部分上下内边距
    $spacing-image_preview_header-paddingX24px图像预览header部分左右内边距
    $spacing-image_preview_footer-paddingY0图像预览footer操作区部分上下内边距
    $spacing-image_preview_footer-paddingX16px图像预览footer操作区部分左右内边距
    $spacing-image_preview_footer_page-marginY0图像预览footer操作区图像页数据上下内边距
    $spacing-image_preview_footer_page-marginX12px图像预览footer操作区图像页数据左右内边距
    $spacing-image_preview_footer_slider-paddingY0图像预览footer操作区slider上下内边距
    $spacing-image_preview_footer_slider-paddingX16px图像预览footer操作区slider左右内边距
    $spacing-image_preview_footer_slider_handle-marginTop8px图像预览footer操作区slider的滑块上外边距
    $spacing-image_preview_footer_divider-marginY0图像预览footer操作区slider的分割线上下外边距
    $spacing-image_preview_footer_divider-marginX16px图像预览footer操作区slider的分割线左右外边距
    $spacing-image_preview_footer_gap-marginLeft16px图像预览footer操作区icon的左外边距
    $width-image_preview_footer_slider132px图像预览footer操作区slider宽度
    $width-image_preview_footer_slider_handle16px图像预览footer操作区滑块宽度
    $width-image_preview_icon40px图像预览footer操作区icon宽度
    $width-image_preview_header_close30px图像预览header部分的关闭热区宽度
    $height-image_preview_header60px图像预览header部分高度
    $height-image_preview_footer48px图像预览footer部分高度
    $height-image_preview_footer_slider2px图像预览footer中slider高度
    $height-image_preview_footer_slider_handle16px图像预览footer中slider的滑块高度
    $height-image_preview_icon40px图像预览footer操作区icon高度
    $height-image_preview_header_close30px图像预览header部分的关闭热区高度
    $radius-imagevar(--semi-border-radius-small)图像圆角
    $radius-image_preview_footervar(--semi-border-radius-medium)图像预览footer操作区圆角
    $color-image_status-bgvar(--semi-color-fill-0)图像加载失败背景颜色
    $color-image_statusvar(--semi-color-disabled-text)图像状态加载失败 icon 颜色
    $color-image_preview_iconvar(--semi-color-white)图像预览中部左右icon背景色
    $color-image_preview_headervar(--semi-color-white)图像预览header文字颜色
    $color-image_preview_footer_iconvar(--semi-color-white)图像预览footer中icon颜色
    $color-image_preview_footer_slider_railvar(--semi-color-white)图像预览footer中slider滑轨颜色
    $color-image_preview_disabledrgba(249, 249, 249, 0.35)图像预览禁用颜色
    $color-image_preview_icon-bgrgba(0, 0, 0, 0.75)图像预览中部icon背景色
    $color-image_header_close-bgrgba(0, 0, 0, 0.75)图像预览header的关闭icon的hover背景色
    $color-image_preview_footer-bgrgba(0, 0, 0, 0.75)图像预览footer部分背景色
    $color-image-preview_divider-bgrgba(255, 255, 255, 0.5)图像预览footer中的分割线背景色
    $color-image_preview_image_spin#ccc图像预览的加载状态颜色