Layui表格图片列需用lay-event+on('tool')绑定点击预览，templet中写img标签并设lay-event="preview"，全局监听tool事件调用layer.photos({photos:{data:[{src:obj.data.avatar}]},anim:5,shadeClose:true})。
layui table 图片列怎么绑定点击事件触发预览
直接在 cols 中配置图片列时，layui 默认只渲染 <img> 标签，不带任何交互。必须手动绑定点击行为——不能依赖 templet 里写 onclick 内联函数（会因 xss 策略被过滤），正确做法是用 lay-event + on('tool') 事件监听。
- 在列定义中加
templet: '<img src=\"{{d.avatar}}\" style=\"width:40px;height:40px;cursor:pointer;\" lay-event=\"preview\">' - 表格容器需有
id（如id="userTable"），且初始化时开启toolbar或至少启用行工具栏：skin: 'line', even: true不影响，但tool: true不是必须的——关键是lay-event属性能被识别 - 全局监听：
table.on('tool(userTable)', function(obj){ if(obj.event === 'preview'){ layer.photos({photos: {data: [{src: obj.data.avatar}]}, anim: 5}); } });
layer.photos 预览单张图要注意哪些参数
直接传单图进 layer.photos 很容易黑屏或报错 TypeError: Cannot read property 'length' of undefined，因为它的 photos 参数必须是对象，且 data 必须是数组（哪怕只有一个元素）。
- 错误写法：
layer.photos({src: obj.data.avatar})→ 缺少data数组包装 - 正确写法：
layer.photos({photos: {data: [{src: obj.data.avatar}]}, anim: 5}) -
anim: 5是淡入效果，避免默认的 0（无动画）导致视觉卡顿；不设shadeClose: true时点击遮罩不关闭，建议显式加shadeClose: true - 如果图地址是相对路径，确保能被浏览器正常加载（比如后端返回的是
/upload/1.jpg，前端访问域要匹配）
多图预览怎么做？后端要不要改结构
如果某行数据本身带多图（如 d.images = ['/a.jpg','/b.jpg']），不需要后端额外接口，只需把数组塞进 photos.data 即可。但注意：Layui 的 layer.photos 不支持异步加载图列表，所有图必须一次性提供 URL 数组。
- 列模板里仍用
lay-event="preview"，但点击时取obj.data.images（假设字段名是images） - 预览调用：
layer.photos({photos: {data: obj.data.images.map(src => ({src}))}, anim: 5, shadeClose: true}) - 如果后端返回的是字符串形式的 JSON 数组（如
"[\"/a.jpg\",\"/b.jpg\"]"），前端需先JSON.parse(obj.data.images)，否则map会遍历字符串每个字符 - 避免在
templet里直接拼多图 HTML（如多个<img>），那样无法统一触发预览逻辑
缩略图加载失败时怎么降级显示文字
原生 <img> 的 onerror 在 Layui 模板中不可靠（DOM 还未挂载完就触发），稳妥做法是在 templet 中用 JS 判断并渲染 fallback。
- 写法示例：
templet: function(d) { return d.avatar ? '<img src=\"' + d.avatar + '\" onerror=\"this.src=\'/static/img/none.png\';this.title=\'图片加载失败\'\" style=\"width:40px;height:40px;cursor:pointer;\" lay-event=\"preview\">' : '<span style=\"color:#999\">无图</span>'; } - 注意引号嵌套：外层单引号，内层双引号；
onerror里用单引号包裹替换值 - 不要用
background-image做缩略图，layer.photos只认<img src>的 URL，不解析 CSS - 如果缩略图是 base64，也能正常传给
layer.photos，但体积大会拖慢预览打开速度
photos.data 必须为数组、以及 lay-event 绑定后没配对应的 table.on('tool(...)') 监听——这两处一错，点击就完全没反应，连控制台都不报错。 
