必须用 lay-event + table.on('tool()') 绑定事件，templet 中返回带 lay-event 的元素并配置 toolbar: true；layer.photos 必须传 {photos: {data: [{src: url}]}} 结构，且 src 为完整可访问 URL。
不能直接在 templet 里写 onclick 调用 layer.photos，否则翻页、重载后事件丢失，且容易因 url 特殊字符（空格、单引号）触发 js 语法错误。
表格列必须用 lay-event + table.on('tool()') 绑定事件
Layui 表格的动态渲染机制决定了：内联 onclick 或 DOM 查找式绑定（如 layui.$('.preview-img').on('click', ...)）在分页、排序、重载后全部失效。唯一稳定的方式是利用表格自带的工具栏事件委托机制。
-
templet中返回带lay-event="viewImg"的可点元素，比如<button type="button" lay-event="viewImg"><img src="{{d.imgUrl}}" alt=""></button> - 必须为该列配置
toolbar: true（哪怕不用其他工具按钮），否则table.on('tool()')不会触发 - 监听时要匹配你设置的
filter值，例如table.on('tool(testTable)', function(obj){...})，其中testTable是你render()时传的id - 事件回调里的
obj.data直接提供当前行完整数据，无需再查 DOM 取src
layer.photos 必须传严格结构，不是 URL 字符串
传错结构是 90% 的人卡住的地方——layer.photos 报 Cannot read property 'length' of undefined 就说明你传了字符串或对象，没包成它要求的数组。
- 正确结构：
layer.photos({photos: {data: [{src: obj.data.imgUrl}]}}) -
data必须是数组，哪怕只有一张图也要写成[{src: '...'}] -
src值必须是浏览器可直接加载的完整 URL（含http://、https://或协议相对路径//），相对路径如./imgs/a.jpg在 AJAX 渲染场景下大概率 404 - 务必提前校验
obj.data.imgUrl是否为空、是否为about:blank或无效值，否则弹窗白屏
图片路径存在但点击无反应的三个硬坑
控制台没报错、图片也显示了，但点不开？大概率掉进下面这些细节陷阱：
-
layui.use(['table', 'layer'], function(){...})里没把layer作为依赖引入，导致layer.photos是undefined -
templet返回的 HTML 字符串中，<img>缺alt属性，某些版本 Layui 会因解析异常跳过整个单元格渲染（尤其配合sort: true时） - 图片地址是后端返回的相对路径（如
/upload/2026/07/abc.jpg），但前端页面部署在子路径（如https://a.com/admin/），实际请求变成https://a.com/admin/upload/...—— 控制台 Network 面板看图片请求状态码就能确认
真正麻烦的不是写几行代码，而是确保 obj.data.imgUrl 在任意分页、搜索、重载后都能被稳定读取，且 layer.photos 接收的结构永远符合约定。这两个点漏一个，功能就断在生产环境里。
