跳到主要内容
前端术语库

UI 组件 · 图片

图片预览

Image Preview

也叫：看大图、灯箱、图片查看器、Lightbox、Image Viewer、Photo Viewer

点开缩略图后铺满屏幕的看大图界面：深色背景上显示原图，可以放大缩小、旋转、左右切换同一组图片，按 Esc 或点 ✕ 关闭。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

给商品评价里的晒图加图片预览：点击任意一张缩略图，打开全屏预览层，背景是 85% 不透明的黑色，200ms 淡入。中间显示原图，按屏幕等比缩放，最大不超过视口的 90%，加载时先显示缩略图并带加载圈。左上角显示「3 / 8」，右上角是 40px 的关闭按钮 ✕；左右两侧垂直居中各放一个 48px 的圆形箭头按钮，切换上一张 / 下一张。底部居中一排工具按钮：缩小、当前比例「100%」、放大、旋转、下载。支持左右方向键切换、Esc 关闭、滚轮缩放，手机上支持双指缩放和左右滑动。打开时禁止背景页面滚动，关闭后焦点回到被点击的缩略图。

发给

01判断

你的内容是这样吗？

对照两列，确认图片预览是不是你要找的。

符合这些情况，用图片预览

  • 商品图、评价晒图、相册，用户想看清图片细节
  • 一组图片需要一张张翻看，例如作品集、房源照片
  • 上传图片后确认效果，或者在聊天、评论里查看别人发的图

是这些情况，换成别的

  • 页面上只是装饰性的配图、图标、头像，点开放大没有意义

  • 图片需要裁剪、标注、修改，应该用专门的图片编辑器

    改用图片

  • 首页横幅这种自动轮换的推广图

    改用轮播图

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    点缩略图直接在新标签页打开原图文件，看完找不到回来的路，也不能切到下一张

  2. 02

    预览层没有关闭按钮，Esc 也关不掉，只能刷新页面

  3. 03

    预览里还是那张模糊的缩略图，放大后全是马赛克

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由深色遮罩、居中的大图、顶部的页码和关闭按钮、两侧的切换箭头和底部的缩放 / 旋转 / 下载工具条组成，可以带一排缩略图。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1整个屏幕变暗，中间是一张很大的图片
  2. 2右上角有 ✕ 关闭按钮，左右两侧各有一个圆形箭头
  3. 3底部有一排放大、缩小、旋转的小图标，顶部有「3 / 8」这样的页码

04解释

详细解释

图片预览（也叫灯箱 Lightbox）是点击小图后弹出的全屏查看层：背景变成深色半透明，中间显示大图，顶部是「3 / 8」页码和关闭按钮，两侧是上一张、下一张的箭头，底部有放大、缩小、1:1、旋转、下载等工具，有的还带一排缩略图。商品详情、评价晒图、相册、聊天里的图片、上传后的确认，基本都靠它看清细节。

它和 图片 的区别：图片是页面上那张图本身，图片预览是点开之后的查看层。它和 对话框 的区别：对话框里放表单、确认这类需要处理的内容，四周还露出页面；图片预览专门用来看图，尽量铺满屏幕、背景压暗、没有多余的按钮。它也不是 轮播图：轮播图是页面里自动切换的一组横幅，图片预览是用户主动打开、手动翻看的。

预览里要加载高清原图，加载时先用缩略图垫着再换成清晰版；长图、竖图要按屏幕尺寸完整显示。支持键盘（左右键切换、Esc 关闭）和手机手势（双指缩放、左右滑动、下滑关闭）。打开时锁住背景页面的滚动，关闭后焦点回到原来那张缩略图；图片要写 alt 文字。

开发者信息
术语 ID
component-image-preview
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-image-preview-root
  • .ant-image-preview-wrap
  • .ant-image-preview
  • .el-image-viewer__wrapper
  • .arco-image-preview
  • .n-image-preview-container
  • .van-image-preview
  • .pswp
  • .lg-outer
  • .fancybox__container
  • .fancybox-container
  • .yarl__portal
  • .yarl__container
  • .PhotoView-Portal
  • .viewer-container
  • .glightbox-container
  • .basicLightbox
  • .lightbox
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • lightbox
  • lightbox-overlay
  • image-preview
  • image-preview-modal
  • image-viewer
  • img-preview
  • photo-viewer
  • image-modal
  • gallery-modal
  • pic-preview
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • ImagePreview
  • ImageViewer
  • ImageLightbox
  • Lightbox
  • PhotoViewer
  • PhotoSlider
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
  • 图片开头
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30