用lightbox插件是最省事的方案，推荐lightgallery.js或bs5-lightbox；需严格使用data-bs-toggle="lightbox"绑定在标签上，注意路径、分组及移动端touch配置。
用 lightbox 插件是最省事的方案
bootstrap 本身不提供图片放大功能，官方 css 和 js 都没内置 lightbox。硬靠自己写 modal + 图片缩放容易漏掉手势、键盘控制、懒加载等细节，直接引入成熟插件更稳。
推荐用 lightgallery.js 或 bs5-lightbox（专为 Bootstrap 5 优化）——它们能自动绑定 data-bs-toggle="lightbox" 这类语义化属性，和 Bootstrap 的 modal 样式、z-index、销毁逻辑天然兼容。
- 别用已停止维护的
ekko-lightbox，它在 Bootstrap 5 下会报TypeError: $(...).ekkoLightbox is not a function - 如果项目已用 jQuery，
lightgallery.js可以无冲突共存；纯原生 JS 项目选bs5-lightbox - 所有插件都要求图片容器带
data-bs-toggle="lightbox"，否则点击无响应
data-bs-toggle="lightbox" 的写法必须严格匹配
这个属性不是 Bootstrap 原生支持的，是插件“劫持”了 Bootstrap 的事件机制。一旦拼写错误或层级不对，就完全没反应，连控制台都不报错，特别难排查。
正确写法示例：
<a href="large.jpg" data-bs-toggle="lightbox" data-bs-title="一只猫"> <img src="small.jpg" alt="缩略图" class="img-fluid"> </a>
- 必须是
<a>标签包裹<img>，不能直接给<img>加data-bs-toggle -
href必须指向高清图地址，不能是#或空字符串 - 如果页面有多个 lightbox，建议加
data-bs-gallery="mygallery"统一分组，否则左右箭头会跨图集跳转
移动端双击放大失效？其实是 touch 事件被拦截了
很多 lightbox 插件默认禁用 touchstart 阻止默认行为，导致 iOS 上双击无法触发原生缩放。这不是 bug，是为防止误触滚动而做的妥协。
- 在
lightgallery.js中，要显式开启：enableTouch: true, enableDrag: false -
bs5-lightbox默认不支持双击缩放，得手动监听dblclick并调用transform: scale()，但要注意和 pinch-zoom 冲突 - 真想原生缩放，最简单的是不用 lightbox，改用
<img>单独全屏 + CSSobject-fit: contain+ 手势库如hammer.js
图片路径出错时，lightbox 不报错但显示空白
这是最常卡住人的点：点击后弹出一个黑框或白框，控制台静悄悄，Network 里也看不到请求。大概率是 href 路径错了，或者服务器返回了 404 但插件没做状态码校验。
- 打开浏览器 Network 面板，过滤
Img，点开 lightbox 后看有没有 failed 请求 - 检查路径是否含中文或空格——部分插件对 URL 编码处理不一致，建议用
encodeURIComponent()预处理 - 如果图存在但跨域，会触发 CORS 错误，此时需服务端配
Access-Control-Allow-Origin，前端加crossorigin="anonymous"到<img>
