媒体

Image Viewer

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

imageviewerlightboxzoomgesturepreviewhoveranimation

快速预览

查看 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  className="w-full"
6  wrapperClassName="flex justify-center items-center"
7/>

组件演示

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

基础用法

点击图片进入灯箱查看

加载过渡效果

图片加载时显示骨架屏动画，加载完成后平滑过渡入场

骨架屏模糊入场

灯箱增强

圆角、遮罩模糊与边距控制

overlayBlurlightboxPaddinglightboxRounded

尺寸限制

限制图片最大高度/宽度，防止竖向比例长的图片占据过多页面空间

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，回弹更明显

状态展示

禁用灯箱与空链接占位

灯箱禁用

空链接占位图片占位: 空链接占位