设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待
图片 Image
基础示例
图片显示方式,支持object-fit所有属性。
容错处理
图片加载失败时显示状态,也可以通过 fallback 属性加载自定义图片。
多张图片
显示多张图片并支持切换。
相册模式
从一张图片点开相册。
功能按钮
支持放大缩小等功能。
Image Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
alt | 图片描述 | string | - |
width | 图片宽度 | number | - |
height | 图片高度 | number | - |
functions | 显示放大缩小等功能,传入函数自定义功能按钮 | boolean | false |
preview | 预览参数 | boolean | true |
src | 图片地址 | string | - |
fit | 确定图片如何适应容器框,同原生 object-fit | fill | - |
fallback | 加载失败容错地址 | string | - |
multiple | 多张预览 | boolean | - |
images | 多张图片列表 | PreviewImageProps[] | - |
id | 图片唯一值 | string | - |
onError | 错误回调 | ((e: SyntheticEvent<HTMLImageElement, Event>) => void) | - |
Image.Preview
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
images | 图片列表 | PreviewImageProps[] | - |