layer.photos 必须传 {photos: {data: [{src: 'url'}]}} 结构，data 为数组且每项含 src；图片需可访问完整 url；表格中须用事件委托而非内联 onclick；需确保 layer 加载、图片不跨域/404、img 标签属性完整。
直接用 layer.photos 就能实现，但必须传对数据结构——传字符串或数组会报 cannot read property 'length' of undefined，这是 90% 的人卡住的第一步。
layer.photos 的参数必须是 {photos: {data: [...]}} 结构
很多人以为 layer.photos({photos: '/xxx.jpg'}) 或 layer.photos(['/xxx.jpg']) 就行，其实全错。Layui 的 layer.photos 内部只认固定格式的对象，且 data 字段必须是数组，哪怕只有一张图。
- ✅ 正确写法：
layer.photos({photos: {data: [{src: '/upload/a.png'}]}}) - ✅ 多图轮播：
{data: [{src: '1.jpg'}, {src: '2.jpg'}, {src: '3.jpg'}]} - ⚠️ src 值必须是可访问的完整 URL（含
http://、https://或协议相对路径//），相对路径如./img/x.png在 AJAX 渲染表格时极易 404 - ⚠️ data 数组里每个对象至少带
src，其他字段如alt、pid可选，但别漏src
表格中图片点击事件必须委托，不能写 onclick="..."
在 templet 里写 <img onclick="showBig('{{d.avatar}}')"> 是高危操作：一旦 d.avatar 含空格、单引号或 HTML 特殊字符，JS 直接 SyntaxError；而且 Layui 表格是动态渲染，内联事件绑不上。
- ✅ 推荐做法：在
templet中用<img class="table-img-preview">，然后统一委托事件：$(document).on('click', '.table-img-preview', function(){...}) - ✅ 更稳方案：用
layui.table.on('tool(tableFilter)', ...)拦截自定义工具栏事件，把图片包装成<button lay-event="viewImg"><img src="%7B%7Bd.avatar%7D%7D"></button> - ⚠️ 别忘了检查
d.avatar是否为null、undefined或空字符串，否则this.dataset.src取出来是undefined，传给layer.photos仍会崩
layer.photos 不生效？先看这三个硬性前提
不是代码逻辑错，而是环境没搭齐。控制台不报错但点开白屏，大概率栽在这三处：
- ❌ 没正确加载
layer模块：写了layui.use(['table', 'layer'], function(){...})，但没在回调里把var layer = layui.layer提出来，导致调用时报layer is not defined - ❌ 图片地址跨域或 404：打开浏览器 Network 面板，点一次图片，看对应请求的状态码。如果是 404 或 CORS error，
layer.photos会静默失败（不弹错误，只显示空白） - ❌
templet返回的 HTML 缺必要属性：比如<img>没alt、没设宽高，某些浏览器会触发 layout shift 导致事件绑定区域偏移，点不到
要不要封装一个通用预览函数？看这三点再决定
如果项目里有 3 张以上表格都要点图放大，重复写 layer.photos({...}) 确实累，也难统一行为。但封装前先确认：
- ✅ 值得抽：需要加 loading 占位、404 fallback 图、统一关闭按钮样式、或限制最大缩放比例
- ✅ 值得抽：多图场景下要支持从当前点击位置开始轮播（靠
start参数，值为数组索引） - ❌ 别过度：不需要做响应式缩放监听、不用封装成 Vue 组件、不用抽象出 class 或 store —— 一个带参数校验的纯函数足矣
最简健壮封装示例：function viewImage(src) { if (!src || typeof src !== 'string') return; layer.photos({photos: {data: [{src}]}, shadeClose: true, closeBtn: 1}); } —— 就这一行调用，比每次手写还快，也杜绝了结构写错。
