设计
设计指南
设计原则
样式指南
设计资源
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显示放大缩小等功能,传入函数自定义功能按钮booleanfalse
preview预览参数booleantrue
src图片地址string-
fit确定图片如何适应容器框,同原生 object-fitfill-
fallback加载失败容错地址string-
multiple多张预览boolean-
images多张图片列表PreviewImageProps[]-
id图片唯一值string-
onError错误回调((e: SyntheticEvent<HTMLImageElement, Event>) => void)-

Image.Preview

参数说明类型默认值
images图片列表PreviewImageProps[]-

贡献者