Layui表格中的图片怎么实现点击放大预览-Layui教程-PHP中文网

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: '@@##@@'}
  ]],
  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 会漏掉内容区<li>不要给 <code>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框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

应在点击事件里加兜底判断：

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="%7B%7Bd.avatar%7D%7D" class="layui-table-img" style="max-width:90%">
图片 404 不会触发 JS 报错，但 layer.photos 加载失败时 UI 卡在 loading 状态，需靠上述过滤提前拦截
如果用的是 base64 图片，src 会很长，layer.photos 支持，但首次打开略慢，不建议在列表中大量使用