需用原生事件控制图片悬停切换，禁用Bootstrap tooltip；移动端须降级为click交互并加容错处理，图片必须配srcset/sizes、onerror回退且避免background-image。
用 data-bs-toggle="tooltip" 不行，得自己监听 mouseenter 和 mouseleave
bootstrap 的 tooltip 是为文字提示设计的，不支持动态换图；强行塞 <img> 进 tooltip 内容会破坏语义、响应慢、移动端失效。真实场景里，你需要的是纯 dom 事件控制 + 图片切换，和 bootstrap 的 js 组件无关，但可以复用它的 css 类做样式。
实操建议：
- 给图片容器加
position: relative，让预览图能绝对定位覆盖原图 - 预览图用
<img>标签单独写在 HTML 里（或 JS 动态创建），初始display: none - 用原生
addEventListener('mouseenter')切换src和显隐状态，别依赖 Bootstrap 的 data-api - 务必加
loading="lazy"和decoding="async"，否则悬停瞬间卡顿明显
srcset 和 sizes 要配对写，否则高清屏下预览图模糊
鼠标悬停时换的图如果只写一个 src，在 Retina 屏或高 DPR 设备上会拉伸模糊。你得按设备像素比提供多尺寸资源，但不能靠 JS 拼字符串——浏览器无法提前加载。
实操建议：
- 预览图标签必须带
srcset和sizes，例如：<img src="thumb-1x.jpg" srcset="thumb-1x.jpg 1x, thumb-2x.jpg 2x" sizes="(max-width: 768px) 100vw, 300px">
- 原图和预览图的宽高比要一致，否则
object-fit: cover会裁错区域 - 别用 background-image 实现预览——它不支持
srcset，也无法被屏幕阅读器识别
移动端没 hover，得 fallback 到点击展开
iOS Safari 和 Android Chrome 都不触发 mouseenter，第一次点击是模拟 hover，第二次才真正跳转或执行动作。纯悬停逻辑在手机上直接失效。
实操建议：
- 检测
'ontouchstart' in window或用matchMedia('(hover: hover)')判断是否支持悬停 - 移动端改用
click事件，并加preventDefault()防止重复触发 - 预览图出现后，加个半透明遮罩层和「X」按钮，方便用户主动关闭，而不是等自动消失
- 别用
:hoverCSS 规则控制显隐——它在 iOS 上有 300ms 延迟，体验极差
图片加载失败时，onerror 必须回退到原图，不能留空白
预览图路径出错、CDN 返回 404、网络中断都会导致 <img> 加载失败。这时候如果没处理，界面上就突然空了一块，用户不知道发生了什么。
实操建议：
- 给预览图绑定
onerror事件，把src改回原图地址，同时style.display = 'block' - 避免用
try/catch包裹img.src = xxx——它不抛异常，只是静默失败 - 如果预览图和原图共用同一张图（比如放大版），也要设
onerror，因为缩略图可能被 CDN 缓存而大图未生成
