layer.photos传参必须为{photos: {data: [{src: 'url'}]}}结构，不可传字符串或单对象；图片需可访问完整URL；表格中须用事件委托绑定，且img标签必须含data-src属性。
layer.photos 传参结构必须是 {photos: {data: [...]}}，不是字符串或单对象
直接 layer.photos('/path.jpg') 或 layer.photos({src: 'xxx.jpg'}) 必然报错 Cannot read property 'length' of undefined。因为 layer.photos 内部只认两层嵌套：外层 photos 是对象，内层 data 是数组，数组每项至少含 src 字段。
✅ 正确写法：layer.photos({photos: {data: [{src: 'https://example.com/a.jpg'}]}})
❌ 错误写法：layer.photos('/a.jpg')、layer.photos({data: [...]})（缺外层 photos）、layer.photos(['a.jpg'])
如果要预览多图，data 数组里塞多个对象即可，但每项的 src 值必须是浏览器能直接加载的完整 URL（带协议或以 // 开头），相对路径容易因 AJAX 请求域和当前页面不一致而 404。
表格中图片点击事件必须委托绑定到 .layui-table-box
在 templet 里写 onclick="layer.photos(...)” 看似简单，实际会失效：渲染后被转义、翻页后事件丢失、XSS 策略可能拦截、d.imgUrl 含单引号或空格时直接 JS 报错。
✅ 推荐做法：给 <img> 加统一 class（如 class="preview-img"），在 table.render() 的 done 回调里委托绑定：
done: function(res, curr, count) {
layui.$('#report_table').next('.layui-table-box').on('click', '.preview-img', function() {
var url = $(this).data('src') || $(this).attr('src');
if (!url || url === 'about:blank') return;
layer.photos({
photos: {data: [{src: url}]}
});
});
}⚠️ 关键点：
- 容器必须选 .layui-table-box，不是 #report_table（它只是占位 div）
- 绑定前要校验 url 是否为空或非法值，否则点开白屏
- data-src 比 src 更稳妥，避免缩略图地址干扰
用 lay-event + table.on('tool()') 是更稳定的替代方案
如果你已在列配置中用了 toolbar 或想统一管理操作行为，推荐走 lay-event 路线。它天然支持动态行、不依赖 DOM 选择器、还能拿到整行数据上下文。
示例列配置：{field: 'picPath', title: '图片', templet: '<div><img class="preview-img" style="max-width:60px;"></div>'}
或者更干净地包装成按钮：{field: 'picPath', title: '图片', templet: '<button lay-event="viewImg" class="layui-btn layui-btn-xs">查看</button>'}
全局监听：
table.on('tool(report_table)', function(obj) {<br>
if (obj.event === 'viewImg') {<br>
var url = obj.data.picPath;<br>
if (url) layer.photos({photos: {data: [{src: url}]}});<br>
}<br>
});
这种方式规避了 DOM 查找、跨域判断、事件重复绑定等问题，适合多图列或需结合其他字段（如标题、描述）构建 data 数组的场景。
图片地址不可访问是白屏最常见原因
控制台没报 JS 错，但点开弹窗空白？大概率是图片请求失败。打开 Network 面板，筛选 Img 类型，看对应 URL 的状态码：
- 404：后端返回的是相对路径（如
uploads/a.jpg），但当前页面 URL 是https://admin.example.com/user/list，浏览器按此路径拼接，结果 404 —— 改用完整 URL 或确保相对路径基准一致 - 0（CORS 或跨域拦截）：图片来自不同域名且服务端未配
Access-Control-Allow-Origin—— 用代理或让后端加 header - 200 但内容非图片：比如后端返回 HTML 登录页（常见于未登录态）—— 在
done或tool里加if (url.startsWith('http'))过滤
别跳过这步检查。90% 的“点不开”问题，根源不在 JS 写法，而在图片资源本身不可达。
