HTML5不自带图片放大功能，需引入第三方JS插件；PhotoSwipe适合移动端，支持手势操作但初始化较重，medium-zoom轻量简洁适用于PC端；选型需考虑平台、生态及加载时机，常见错误源于资源顺序或DOM未就绪。
HTML5 本身不提供图片放大查看功能，所谓“调用 JS 插件”其实是引入第三方库（如 lightgallery、PhotoSwipe 或轻量级的 medium-zoom），再用 JS 初始化。直接写 <img alt="HTML5调用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 就绪。
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 确保
photoswipe.min.js和photoswipe-ui-default.min.js都已加载，且顺序不能颠倒 - 不要在
里直接写初始化脚本，改用document.addEventListener('DOMContentLoaded', ...) - 若图片是 AJAX 加载的，得在内容插入 DOM 后重新调用
initPhotoSwipeFromDOM()，不能只执行一次
medium-zoom 的几个关键配置项
它默认行为简洁，但几个参数直接影响体验：
立即学习“前端免费学习笔记（深入）”；
-
margin：弹窗与视口边缘的距离，默认 24，小屏建议设为8或0 -
scrollOffset：滚动时是否跟随页面，默认40，设为0可禁用 -
template：可自定义放大后的 HTML 结构，比如加下载按钮 —— 但注意，模板中必须保留data-zoom-image占位符 - 不支持 GIF 动画播放控制，放大后动图会暂停，这是浏览器限制，非插件缺陷
真正麻烦的不是接入，而是响应式缩放边界判断和键盘/手势冲突。比如在 iOS Safari 上，双击放大可能触发系统默认行为，得用 event.preventDefault() 拦截；又比如 Zoom 插件和轮播组件共存时，滑动手势容易误判。这些细节没文档专门讲，只能靠真机反复测。
