必须用事件委托绑定到稳定父容器（如.layui-table-body），且layer.photos参数需严格为{photos:{data:[{src:'xxx'}]}}结构，同时过滤空src。
直接用 layer.photos 就能实现，但必须传对数据结构、绑对事件位置、过滤无效 src，否则点开白屏或报错。
为什么内联 onclick 或直接 jQuery 绑定会失效
Layui 表格是动态渲染的：翻页、重载、搜索后，img 元素会被重新插入 DOM，原生内联事件（如 onclick="showImg(...)"）或 layui.$('img').on('click', ...) 会丢失绑定。常见错误包括：
-
templet里写onclick="showImg('{{d.url}}')"——d.url含特殊字符或为空时 JS 报错 - 在
done回调里反复执行layui.$('img').on('click', ...)—— 多次绑定导致点击一次触发多次弹窗 - 监听
#demo容器的click但没限定子选择器 —— 点到表头、分页栏也触发
必须用事件委托，且目标容器要选对
推荐两种稳定写法（任选其一），关键在于父容器必须长期存在、不随表格重绘而销毁：
- 绑定到
.layui-table-body（它随内容更新复用），选择器用td .preview-img（建议给图片加 class，避免误触） - 绑定到
.layui-table-box（表格实际内容区），选择器用.layui-table-img（Layui 官方示例常用类名） - 绝对不要绑定到
#demo或table标签本身 —— 滚动时tbody可能被虚拟替换，事件失效
layer.photos 的参数结构不能错
layer.photos 不接受字符串、单个对象或自定义字段名，只认严格嵌套结构：{photos: {data: [{src: 'xxx.jpg'}]}}。常见错误和处理方式：
- 错误写法：
layer.photos({src: src})、layer.photos([src])、layer.photos({data: []})→ 报Cannot read property 'length' of undefined - 正确写法：
layer.photos({photos: {data: [{src: src}]}})，其中src字段名不可改 - 必须提前过滤：
if (!src || src === 'about:blank') return;，否则空值或非法地址会导致白屏 - 图片路径需可访问，
layer.photos不做校验，404 也会直接塞进<img>
完整实操示例（放在 table.render 的 done 回调里）
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{ field: 'avatar', title: '头像', templet: function(d) {
return '@@##@@';
}}
]],
done: function() {
// ✅ 正确绑定：委托到稳定父容器，精准匹配 class
layui.$('.layui-table-body').on('click', 'td .preview-img', function() {
var src = this.src;
if (!src || src === 'about:blank') return;
layer.photos({
photos: { data: [{ src: src }] },
anim: 5,
shadeClose: true
});
});
}
});
最容易被忽略的是：图片 src 为空或跨域时不会报错，但预览层一片空白；另外，如果表格用了 fixed: true 列，全屏预览后返回，可能需要手动调 table.resize() 修复列宽 —— 这和预览本身无关，但用户操作流里紧挨着发生，常被归因于预览逻辑出问题。
%20+%20')
