window.open()需用户点击触发，传完整URL和尺寸参数（如width=800,height=600），否则易被拦截；单图预览简单直接，但样式不可控、兼容性弱，现代推荐用<dialog>或背景图方案。
点击按钮触发图片预览，用原生 window.open() 最简单
直接开新窗口最省事，适合单张图、不需交互的场景。缺点是可能被浏览器拦截（尤其无用户手势触发时），且样式不可控。
- 确保
button的onclick是用户真实点击触发，避免 JS 自动调用，否则 Chrome/Firefox 会拦截 - 路径必须是完整 URL 或相对路径（如
"./images/photo.jpg"），不能是本地文件路径"file:///..." - 新开窗口尺寸可控制：
window.open(url, "_blank", "width=800,height=600")，但部分浏览器会忽略尺寸参数
用 dialog 元素实现模态预览（现代推荐）
<dialog> 是原生语义化弹层，无需第三方库，兼容性已覆盖 Chrome 97+、Firefox 98+、Safari 15.4+。IE 完全不支持，需 fallback。
- HTML 结构必须包含
<dialog>+<img>+ 关闭按钮（<button onclick="this.closest('dialog').close()">） - 首次使用前需调用
dialog.showModal()，不能只靠 CSS 显示 - 图片加载失败时，
<img onerror="this.parentElement.textContent='图片加载失败'">可兜底
用 background-image + display: flex 快速实现轻量预览
适合不想操作 DOM 或避免新标签页的场景，本质是用遮罩层盖住页面，把图片设为背景。
- 预览容器需固定宽高、
background-size: contain或cover，并设background-position: center - 绑定点击事件后，动态设置
element.style.backgroundImage = "url('...')"，注意 URL 要加引号 - ESC 键关闭需监听：
document.addEventListener("keydown", e => e.key === "Escape" && previewEl.classList.remove("show"))
常见错误：图片路径 404 或跨域导致预览空白
不是代码写错了，而是资源根本没加载进来。打开浏览器 DevTools 的 Network 标签页，点预览后看对应图片请求状态。
立即学习“前端免费学习笔记（深入）”；
- 路径错误：检查控制台报的
GET http://.../xxx.jpg 404，确认路径相对于当前 HTML 文件位置是否正确 - 跨域问题：如果图片来自其他域名，且服务端没配
Access-Control-Allow-Origin，<img>能显示但 Canvas 读取会失败（影响缩放/下载功能） - 开发服务器未启用静态资源服务：Vite/webpack-dev-server 默认 serve
public/下文件，图片放错目录会导致 404
实际项目里，真正卡住人的往往不是怎么写，而是图片路径拼错、开发服务器没跑、或者忘了给 <dialog> 加 showModal() 调用。
