HTML5不自带图片放大功能，需引入第三方JS插件；PhotoSwipe适合移动端，支持手势操作但初始化较重，medium-zoom轻量简洁适用于PC端；选型需考虑平台、生态及加载时机，常见错误源于资源顺序或DOM未就绪。
HTML5 本身不提供图片放大查看功能，所谓“调用 JS 插件”其实是引入第三方库（如 lightgallery、PhotoSwipe 或轻量级的 medium-zoom），再用 JS 初始化。直接写 标签加个属性不会自动放大——这是最常被误解的一点。
怎么选插件：看是否要支持触摸拖拽和缩放
移动端用户占比高时，PhotoSwipe 是更稳妥的选择，它原生支持双指缩放、滑动切换、懒加载；而 medium-zoom 只做单图弹出+简单缩放，不支持手势操作，适合 PC 端文章配图场景。
-
PhotoSwipe需要手动构造图库 DOM 结构（如.pswp容器）并调用new PhotoSwipe()，初始化稍重 -
medium-zoom只需一行：mediumZoom(document.querySelectorAll('img[data-zoom]'))，且支持data-zoom指向高清图地址 - 如果项目已用 Vue/React，优先选对应生态封装版（如
@photo-swipe/vue），避免手动管理生命周期
常见报错：PhotoSwipe is not defined 或 Cannot read property 'open' of undefined
这类错误基本都源于资源加载顺序或初始化时机不对。JS 文件必须在 底部或用 defer 加载，且初始化代码不能早于 DOM 就绪。
- 确保
photoswipe.min.js和photoswipe-ui-default.min.js都已加载，且顺序不能颠倒 - 不要在
里直接写初始化脚本，改用document.addEventListener('DOMContentLoaded', ...) - 若图片是 AJAX 加载的，得在内容插入 DOM 后重新调用
initPhotoSwipeFromDOM()，不能只执行一次
medium-zoom 的几个关键配置项
它默认行为简洁，但几个参数直接影响体验：
