直接用包无法触发放大效果，因原生行为是导航而非模态展示；需用js拦截默认行为，通过data-preview钩子动态创建遮罩层实现点击放大预览。
为什么直接用 @#@#@#@#@#@#@#@#@#@0 只会跳转或下载图片，浏览器默认不提供“点击放大预览”功能。这不是 bug，而是 HTML 原生行为——@#@#@#@#@#@#@#@#@#@1 —— data-preview 是 JS 的钩子，比 class 更明确
alt，否则屏幕阅读器无法描述图片内容<img> 加 width/height 行内样式，否则缩略图比例可能和大图不一致，JS 计算居中时出错javascript:void(0) 或 # 作 href——破坏可爬行性；真实大图地址才是正确值JS 如何安全拦截并渲染预览层
核心是阻止默认跳转、读取 href、创建临时 DOM、绑定关闭逻辑。不依赖框架，原生即可。
document.querySelectorAll('a[data-preview]').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const largeSrc = link.href;
const altText = link.querySelector('img').alt || '';
// 创建遮罩层和图片容器
const overlay = document.createElement('div');
overlay.className = 'preview-overlay';
overlay.innerHTML = `
<div class="preview-content">
@@##@@
<button class="preview-close">×</button>
</div>
`;
document.body.appendChild(overlay);
// ESC 关闭
const close = () => overlay.remove();
overlay.addEventListener('click', e => e.target === overlay && close());
overlay.querySelector('.preview-close').addEventListener('click', close);
document.addEventListener('keydown', e => e.key === 'Escape' && close());
});
});
- 注意
loading="lazy"：大图延迟加载，避免预览前就请求资源 - 关闭逻辑必须覆盖三种方式：点击遮罩背景、点 × 按钮、按 ESC —— 缺一不可
- 不要用
innerHTML拼接未转义的altText，实际项目中需DOMPurify.sanitize()或手动替换<code>> - 如果页面已有滚动条，
body需临时加overflow: hidden，否则滚动时预览层会错位
容易被忽略的兼容性细节
看似简单，但不同场景下行为差异很大，尤其移动端和键盘用户。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 移动端双击缩放会被遮罩层禁用——需在
.preview-overlay上加touch-action: none，否则用户无法手势缩放大图 - 键盘焦点流断裂：点击打开后，焦点不在关闭按钮上，盲人用户无法用 Tab 切换——JS 插入后必须
overlay.querySelector('.preview-close').focus() - 图片加载失败时，
<img src="thumb.jpg">的onerror不会自动触发，得监听load和error事件，显示 fallback 提示 - 如果大图 URL 含中文或特殊字符，
link.href返回的是编码后字符串，直接拼进innerHTML会出错，要用decodeURIComponent()
预览功能的复杂度不在结构，而在交互边界——点击、ESC、触摸、焦点、加载、错误，每个都得单独兜底。写完结构只是开始。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
