Layui表格中实现图片悬停预览需用函数式templet返回带data-big属性的img标签，再通过事件委托绑定mouseenter/mouseleave动态创建浮层；移动端需降级为click触发并防误触。
layui table 的 templet 中怎么插入可悬停预览的图片
直接在列的 templet 里用 <img> 标签不行——layui 默认会把 html 转义，图片不渲染。必须用函数式 templet 并返回带 title 或自定义属性的 dom 字符串，再配合 js 绑定事件。
常见错误是写成字符串模板：templet: '<img src=\"{{d.avatar}}\">'，这只会显示原始 HTML 文本。
- 必须写成函数：
templet: function(d) { return '<img src=\"' + d.avatar + '\" data-big=\"' + d.avatar + '\" class=\"preview-img\">'; } -
data-big存放大图地址（和缩略图不同源时尤其关键） - 加
class便于后续统一绑定事件，避免污染全局img
怎么用原生 JS 实现 hover 预览浮层（不依赖 layer.open）
Layui 自带 layer，但 layer.tips 不适合大图，layer.open 又太重、触发慢。更轻量的做法是动态创建 <div> 浮层，用 mouseenter/mouseleave 控制显隐。
注意：不能用 document.querySelectorAll('.preview-img') 在表格渲染前绑定，因为 Layui 表格是异步渲染的，得监听 done 回调或用事件委托。
- 推荐用事件委托：
$(document).on('mouseenter', '.preview-img', showPreview) -
showPreview函数里读取e.currentTarget.dataset.big获取大图地址 - 浮层
z-index至少设为9999，否则被 Layui 弹窗遮挡 - 记得在
mouseleave里移除浮层，避免残留
图片地址是相对路径或需要 token 验证怎么办
如果后端返回的是相对路径（如 /upload/xxx.jpg），直接赋给 src 可能 404；如果接口需 token，<img> 标签无法自动携带请求头，只能走代理或拼 query。
- 前端拼 token：
data-big=\"' + d.avatar + '?token=' + layui.data('user').token - 若用 Nginx 代理，确保静态资源路径与前端访问路径一致，否则
src和data-big地址要统一协议+域名 - 缩略图和大图尺寸差异大时，建议后端返回两个字段：
d.thumb和d.large，别共用一个字段硬缩放
移动端怎么兼容 hover 效果
手机上没有 hover，单纯靠 mouseenter 会失效。必须降级为 click 触发，且要考虑误触问题。
- 检测是否为移动端：
if (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) - 移动端改用
click，并加setTimeout防止和表格行点击冲突（Layui 表格默认 click 行会触发row事件） - 或者统一用
tap（需引入jquery.touchSwipe.min.js等库），但增加依赖不推荐
hover 预览看着方便，但实际在后台系统里，用户更常需要右键另存或下载原图——这个功能得额外加 contextmenu 事件，不是 hover 能覆盖的。
