layui table图片列需在done回调中用layui.$委托绑定.click事件到.layui-table-img，配合layer.photos({photos:{data:[{src:xxx}]}})预览单图，并过滤空值、about:blank等异常src。
layui table 图片列怎么绑定点击事件
默认的 layui.table 渲染后，单元格内容是纯 html 字符串，不会自动绑定任何交互；图片点击放大必须手动加事件监听，不能靠 templet 里写 onclick 内联函数（容易失效或重复绑定）。
正确做法是在 done 回调里用事件委托绑定，确保动态渲染的行也能响应：
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'avatar', title: '头像', templet: '<img src="{{d.avatar}}" class="layui-table-img" style="max-width:40px;">'}
]],
done: function(res, curr, count){
// 用事件委托，避免每行重复绑定
layui.$('#demo').next('.layui-table-box').on('click', '.layui-table-img', function(){
var src = this.src;
layer.photos({
photos: {
"title": "图片预览",
"data": [{"src": src}]
},
anim: 5
});
});
}
});- 必须用
layui.$（不是原生document.querySelector），否则可能拿不到滚动区域内的元素 -
.layui-table-box是表格实际内容容器，#demo只是占位<div>，直接在它上面 bind click 会漏掉内容区 - 不要给
img加id或用each()遍历绑定——表格翻页、重载后事件就丢了
layer.photos 怎么只预览单张图不报错
layer.photos 要求传入对象必须有 data 数组，且数组项至少含 src 字段；直接传字符串会报 Cannot read property 'length' of undefined。
常见错误写法：layer.photos({src: 'xxx.jpg'}) 或 layer.photos(['xxx.jpg']) —— 全部无效。
- 正确结构必须是：
{photos: {data: [{src: 'xxx.jpg'}]}} - 如果想支持「双击放大」，可以额外监听
dblclick，但注意移动端没有双击事件，别混用 - 若图片地址是相对路径（如
/upload/1.png），确保当前页面域名和图片可访问，否则预览空白但控制台无报错
图片列内容为空或加载失败时怎么避免点击报错
当 d.avatar 是 null、'' 或 404 图片时，this.src 可能返回浏览器 fallback 地址（如 about:blank），点开会白屏或报错。
应在点击事件里加兜底判断：
layui.$('#demo').next('.layui-table-box').on('click', '.layui-table-img', function(){
var src = this.src;
// 过滤空值、data URL、about:blank、跨域不可读地址
if (!src || src.indexOf('data:') === 0 || src === 'about:blank' || src.indexOf('http') !== 0 && src.charAt(0) !== '/') {
return;
}
layer.photos({
photos: {data: [{src: src}]},
anim: 5
});
});- 服务端返回空字符串时，
templet里最好也做判断：{{# if(d.avatar){ }}<img src="{{d.avatar}}"...{{# } }} - 图片 404 不会触发 JS 报错，但
layer.photos加载失败时 UI 卡在 loading 状态，需靠上述过滤提前拦截 - 如果用的是 base64 图片，
src会很长，layer.photos支持，但首次打开略慢，不建议在列表中大量使用
为什么用 layui.img 指令不行
有人尝试在 templet 里写 <img lay-event="preview" src="{{d.avatar}}">，再用 table.on('tool(...)', ...) 监听——这完全走不通。
lay-event 只对 toolbar 和 event 列生效，普通字段列里的自定义属性不会被 table 组件识别或转发。
- 表格单元格内所有 HTML 都是静态渲染，不参与事件系统
-
table.on('tool(xxx)')的触发前提是元素上有lay-event且父容器有lay-event属性，普通img标签不满足条件 - 强行套用只会让代码看起来“有逻辑”，实际点击毫无反应
实际项目里最常被忽略的是图片地址协议一致性：后台返回的 http:// 图片，在 https:// 页面里会被浏览器拦截，预览弹窗打不开也没提示。得统一转成相对协议 //xxx.com/xxx.jpg 或服务端补全协议。
