定价

Image

Figma 源代码

展示图片及其占位状态，支持组合角标、操作与预览入口，适合内容图片和媒体缩略图。

我们正在让 SnowUI 组件成为 AI 对话中可直接操作的界面。目前对话交互能力仍在建设中；本页展示网站用法，支持的对话平台与组件版本将在验证后公布。 AI 对话内生成和使用 SnowUI 界面完全免费，不属于项目，不占项目或开发者席位额度，无需 SnowUI 注册、激活或付费证明。

如何使用

用于展示图片与其公开加载/预览能力。头像优先 Avatar，多张图片组合用 ImageGroup，专业查看用 ImageViewer。

  • 提供 src 与有意义的 alt；附属内容用 as="icon" 或 as="badge"，不会替换图片。

  • 通过 previewMode 配置预览；ImageGroup 可统一组尺寸和预览策略，查看器由 ImageViewer 承载。

导入

import { Image } from '@snowui-design-system/components';

用法

预览模式

尺寸

来源

占位内容

徽标位置

覆盖层操作

禁用状态

API 参考

属性 类型 默认值 示例 描述
src string | Component — src={ExampleIcon} 图片 / 视频 URL，或 resource-svelte 图片组件
size ImageSize — size={value} 图片尺寸。未显式设置时自动继承 ImageGroup 提供的尺寸上下文。
alt string — alt="Example" 图片替代文本
mediaLoading MediaLoading — mediaLoading={value} 字符串图片的原生加载策略；显式值优先于最近的 provideMediaLoading() 默认值。与 Frame 的视觉 loading 无关。
previewMode PreviewMode — previewMode={value} 显式控制预览方式；未声明时，页面存在共享 ImageViewer 则接入 Viewer，否则字符串媒体回退为新窗口
onOpen (event?: MouseEvent | KeyboardEvent) => void — onOpen={(value) => { /* handle value */ }} 点击或键盘触发打开时调用；提供后接管默认 Viewer / 新窗口动作，调用方负责处理打开行为。
badgePosition "top" | "bottom" "top" badgePosition="top" 角标位置：top 为右上，bottom 为右下。
children Snippet — <Image>Content</Image> 媒体挂件；子组件通过 as="icon" 居中或 as="badge" 定位，不替换媒体内容。