Layui如何实现在表格中点击头像查看大图-Layui教程-PHP中文网

头像列应通过 cols 的 templet 返回 img 标签，绑定事件委托调用 layer.photos()；photos.data 必须为含 src 字段的数组，需校验 URL 有效性并确保 layer 模块已加载。

表格中头像列如何渲染为可点击的图片标签

直接在 cols 配置里用 templet 返回带 onclick 的 <img> 即可，但注意不能写内联 js（如 javascript:void(0)），layui 会过滤。正确做法是绑定事件委托或用 layui.use('layer') 配合 layer.photos()。

常见错误是把大图 URL 写死，或漏传 data 参数导致 layer.photos() 报 Cannot read property 'length' of undefined。

头像字段值必须是完整可访问的图片 URL（如 https://xxx.com/avatar.jpg），相对路径需补全
不要在 templet 里写 onclick="layer.photos(...)" —— Layui 会清空该属性
推荐用 event.stopPropagation() 防止触发行点击事件（如果表格启用了 rowClick）

如何用 `layer.photos()` 正确显示单张大图

layer.photos() 默认期望接收一个包含 photos 对象的配置，而该对象必须有 data 数组。即使只看一张图，也要包装成数组，否则报错。

示例代码片段（放在 templet 后的 done 回调或外部事件监听中）：

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

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

下载

<script>
table.on('tool(test)', function(obj){
  if(obj.event === 'viewAvatar'){
    var avatar = obj.data.avatar;
    layer.photos({
      photos: {
        "data": [{
          "src": avatar,
          "alt": "头像",
          "pid": obj.data.id // 可选，用于标识
        }]
      },
      anim: 5
    });
  }
});
</script>

photos.data 必须是数组，哪怕只有一项
src 字段值要能被浏览器直接加载，建议提前做空值校验：if (!avatar) return
不建议在 templet 中直接调用 layer.photos()，因为此时 DOM 尚未完全挂载，容易触发渲染异常

为什么点击后没反应？检查这三处

最常卡在这几个地方：URL 跨域、layer 模块未加载、图片字段为空或格式错误。

确认已引入 layer 模块：layui.use(['table', 'layer'], function(){...})
检查控制台是否报 CORS 错误 —— 如果头像来自不同域名且服务端没配 Access-Control-Allow-Origin，layer.photos() 会静默失败
打印 obj.data.avatar 看是否为 undefined 或 null；某些接口返回的是 base64 字符串，layer.photos() 不支持直接渲染 base64 图片（需转为 blob URL 或存为临时文件）