原生实现图片预览需用动态遮罩层避免重复加载，支持esc/点击关闭、焦点管理；兼容旧safari需检测dialog支持性并降级；必须处理图片加载失败提示与复制地址功能，禁用background-image和不当touch-action。
点击图片直接在页面内弹出大图预览
不需要引入任何第三方库，用原生 HTML + CSS + 少量 JavaScript 就能实现轻量、可访问、无闪屏的点击预览效果。关键在于避免用 window.open 或跳转新页，而是动态插入一个遮罩层（overlay）和大图容器。
常见错误是把 <img> 的 src 直接塞进 <dialog></dialog> 或 display: none 元素里——这样会导致图片重复加载，首次点击有延迟；更糟的是没处理 Esc 关闭、点击遮罩关闭、键盘焦点管理，导致体验断裂。
- 给每张预览图绑定
click事件，读取其src和可选的alt - 动态创建
<div class="preview-overlay"> 和 <code><img class="preview-img">，设置src后再显示（防止空白闪烁） - 必须监听
keydown捕获Escape，并用event.target === overlay判断是否点在遮罩上才关闭（避免误关大图本身） - 打开后立即将焦点移到大图或关闭按钮，关闭时还原回原图（
focus()） - 必须手动设置
dialog.open = true后再调用showModal()，否则 Safari 可能报错 -
<dialog></dialog>内部不能用position: fixed做居中，要用margin: auto+width/max-width - 关闭时记得调用
dialog.close()，不要只设open = false - 给
<img class="preview-img">绑定onerror，设置src为占位图或插入<p>图片加载失败</p> - 在错误提示旁放一个
<button onclick="navigator.clipboard.writeText(imgSrc)">复制地址</button> - 避免用
background-image实现大图——它无法监听加载失败，也无法被屏幕阅读器识别 - 确保预览容器没有
touch-action: none或-webkit-user-drag: none - 大图 CSS 中避免写死
max-width: 100vw，改用max-width: 90vw留出安全边距 - 如果真要加手势支持，优先用
pinch-zoom-js这类轻量库，而不是从零写
用
<dialog></dialog> 是语义最清晰的方案，自带 showModal() 和 close()，且默认阻止背景交互、管理焦点。但它在 Safari 15.4 之前不支持，iOS Safari 直到 16.4 才完整支持 backdrop 样式。
如果你项目需兼容旧版 Safari，别直接用 <dialog></dialog> —— 可以检测 'showModal' in HTMLDialogElement.prototype，不支持时 fallback 到 div 模拟；或者统一用 div，只把 <dialog></dialog> 当作语义增强（加 role="dialog" 和 aria-modal="true"）。
图片加载失败时要有降级提示
大图 src 加载失败很常见（路径错、权限限制、跨域），但多数实现直接留白或显示破碎图标，用户完全不知道发生了什么。
必须监听 onerror 事件，在预览区域插入一段文字提示，并提供“查看原图链接”或“复制地址”按钮。同时给大图加 loading="lazy" 无意义——预览图是用户主动触发的，应立即加载。
移动端双击缩放和手势拖拽不是必须的
很多人以为预览必须支持双击放大、手指拖拽，其实反而破坏体验：原生 <img> 在 iOS/Android 上已支持双指缩放，只要不设置 user-scalable=no 在 viewport meta 里，也不阻止 touchstart 事件，系统行为就自然生效。
强行自己实现缩放逻辑（比如用 transform: scale() + translate()）会和原生手势冲突，导致卡顿、焦点丢失，还增加大量边界判断代码。除非你明确需要自定义缩放上限、双击动画或惯性拖拽，否则别碰。
真正容易被忽略的是图片宽高比突变时的布局抖动——比如一张竖图和一张横图连续预览，遮罩层高度会跳变。解决方案很简单：给预览图容器设固定 aspect-ratio，或用 min-height: 70vh 配合 object-fit: contain。
