layui table图片列需通过事件委托在done回调中绑定lightbox，推荐使用fslightbox库：引入CDN后在templet中添加data-fslightbox属性，并在done中初始化实例；若不用第三方库，可手写全屏预览层，注意z-index、图片缩放及事件清理。
layui table 图片列怎么绑定 lightbox 事件
直接用 layui.table 渲染的表格，单元格里放 <img> 标签，默认不会响应点击，更不会自动触发灯箱。layui 自身不提供原生 lightbox 组件，得靠外部库（比如 fslightbox 或 lightgallery）或手写简易全屏预览逻辑。
为什么不能直接给 td 里 img 加 onclick
因为 layui 表格是动态渲染的，尤其是开启分页、重载、搜索后，DOM 会重建，直接写在模板里的 onclick 会失效；另外，layui.table 的 templet 返回的是字符串，不是实时 DOM 节点，事件绑定必须委托或在 done 回调里重绑。
- 错误写法：
templet: '<img src="%7B%7Bd.avatar%7D%7D" onclick="showBigImg(this.src)">'—— 分页后点击无效 - 正确时机：在
done回调中用事件委托绑定，或用layui.$(tableElem).on('click', 'td .preview-img', ...) - 注意：不要用
document.onclick全局监听，容易误触、性能差
用 fslightbox 实现最简全屏灯箱
fslightbox 是轻量级、无依赖、支持单图/多图的现代 lightbox 库，比 lightGallery 更适合嵌入 layui 表格这种简单场景。只需两步：
- 引入 CDN：
<script src="https://cdn.jsdelivr.net/npm/fslightbox@3.6.0/index.js"></script> - 在
templet中给图片加data-fslightbox属性，值统一（如"gallery"），同一组图片就能联动切换 - 确保图片有
src且可访问，否则 lightbox 点开是黑屏或报错Failed to load image
示例 templet：
templet: function(d) {
return '@@##@@';
}
然后在 done 回调里强制刷新 lightbox 实例（防止重复初始化）：
done: function(res, curr, count) {
// 清除旧实例避免重复绑定
if (window.lightboxInstances) {
window.lightboxInstances.forEach(inst => inst.destroy());
}
window.lightboxInstances = [];
// 初始化当前页所有带 data-fslightbox 的元素
layui.$('[data-fslightbox]').each(function() {
window.lightboxInstances.push(new FsLightbox({
sources: [this.src],
autoFocus: true
}));
});
}
自定义简易全屏预览（不用第三方库）
如果项目不允许引入额外 JS，可以手写一个最小可用的全屏预览层。核心是：监听图片点击 → 创建遮罩层和大图 → 按 ESC 或点击遮罩关闭。
- 关键点：遮罩层需
z-index高于 layui 的.layui-layer（建议设为 999999） - 图片宽高要按视口等比缩放，避免溢出或过小，推荐用
max-width: 90vw; max-height: 80vh;+object-fit: contain; - 务必在关闭时移除 DOM 并解绑
keydown，否则多次打开会堆叠多个监听器 - 不要用
background-image方式加载大图，会导致无法右键保存、不支持懒加载
基础结构示例（放在 done 里执行）：
layui.$(tableElem).on('click', 'td .preview-img', function() {
const src = this.src;
const $mask = layui.$('<div class="img-preview-mask">@@##@@</div>');
$mask.css({
position: 'fixed',
top: 0, left: 0, width: '100%', height: '100%',
background: 'rgba(0,0,0,.9)',
zIndex: 999999,
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
});
$mask.find('img').css({
maxWidth: '90vw',
maxHeight: '80vh',
objectFit: 'contain'
});
layui.$('body').append($mask);
// ESC 关闭
const closeFn = () => { $mask.remove(); layui.$(document).off('keydown', closeFn); };
layui.$(document).on('keydown', closeFn).on('click', function(e) {
if (e.target === $mask[0]) closeFn();
});
});
注意：fslightbox 默认支持键盘方向键切换，而手写方案要自己补；移动端双指缩放、拖拽等交互基本没有，真有这些需求，还是得上专业库。另外，表格列宽度太窄时，小图可能被压缩失真，建议用 min-width 保底或改用缩略图服务返回合适尺寸。
%20+%20')
