QiuYe UI
内容与媒体

Image Viewer

带灯箱预览的图片查看器，支持点击放大、滚轮/触控缩放、拖拽平移、平滑圆角、骨架屏加载过渡与悬浮放大动效。

imageviewerlightboxzoomgesturepreviewhoveranimationsmooth-corners

快速预览

查看 Image Viewer 组件的基本效果

基本用法

使用 Image Viewer 组件的基础示例

导入组件

1import { ImageViewer } from "@/components/qiuye-ui/image-viewer";

使用组件

1<ImageViewer
2  src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1200&q=80"
3  alt="荒漠公路"
4  maxHeight={400}
5  rounded="2xl"
6  lightboxRounded="2xl"
7  smoothCorners
8  smoothCornerSmoothing={0.72}
9  className="w-full"
10  wrapperClassName="flex justify-center items-center"
11/>

组件演示

查看组件的各种使用方式和效果

基础用法
点击图片进入灯箱查看
加载过渡效果
图片加载时显示骨架屏动画，加载完成后平滑过渡入场
骨架屏模糊入场
灯箱增强
平滑圆角、遮罩模糊与边距控制
overlayBlurlightboxPaddinglightboxRoundedsmoothCorners
尺寸限制
限制图片最大高度/宽度，防止竖向比例长的图片占据过多页面空间
maxHeightmaxWidth
maxHeight=300
maxHeight="50vh"
maxWidth=200 maxHeight=300
悬浮放大效果
鼠标悬浮时整体放大（含圆角容器），不影响页面布局，支持自定义弹性系数
hoverScalehoverBounce
scale=1.05 bounce=0

无弹性，平滑缩放

scale=1.05（默认 bounce）

默认弹性 0.25，轻微回弹

scale=1.05 bounce=0.5

较强弹性 0.5，回弹更明显

状态展示
禁用灯箱与空链接占位
灯箱禁用
空链接占位图片占位: 空链接占位