layer.photos调用必须传非空data数组且每项含src，photos须为对象而非数组；pid需唯一；相对路径需可解析；表格中禁在templet内直接调用，应事件委托绑定；移动端加touchstart；多图相册需手动拼data；缩略图用thumb字段；加载失败优先检查data-src可访问性。
layer.photos 传 JSON 数据时 data 字段必须非空且每项含 src
传空数组、data 缺失、或某张图的 src 为空字符串，都会导致相册静默失败，控制台不报错但显示“没有照片”。
-
photos必须是对象，不能直接传数组（常见错误：layer.photos({ photos: [...] })❌） - 正确结构：
{ title: 'xxx', data: [{ src: 'a.jpg', alt: '描述' }, { src: 'b.jpg' }] }✅ -
pid字段非必需，但若存在，必须唯一；重复pid会导致切换卡死或跳图 - 后端返回相对路径（如
uploads/1.jpg）时，确保它相对于当前页面可解析；推荐统一返回完整 URL
表格中点击图片触发 layer.photos，别在 templet 里直接调用
在 layui.table 的列配置里写 templet 渲染 HTML，但绝不能在里面写 layer.photos(...) —— 此时 DOM 还没插入文档，会报 elem is not found。
- 正确做法：用
templet输出带data-src的<img>，并包裹进有data-photos属性的容器里，例如：<div data-photos="\'{"title":"订单图片","id":123}\'"><img src="thumb.jpg"></div> - 然后在表格渲染完成后，用事件委托绑定：
$('body').on('click', '[data-photos] img', function(){...}) - 移动端需额外监听
touchstart，iOS Safari 对click在<img>上支持不稳定
同一行多个图片组成一个相册，必须手动拼 data 数组
layer.photos 不会自动扫描同容器下所有 img[data-src] —— 它只认你显式塞进 data-photos 的 data 字段。
- templet 中要构造：
data-photos='{"data":[{"src":"a.jpg","alt":"图1"},{"src":"b.jpg","alt":"图2"}]}' - 如果图片数量动态变化，建议在后端接口里就组装好这个数组字段，前端直接取用，避免 JS 拼接出错
- 缩略图地址不要混进
data；src字段必须是大图 URL，thumb字段才用于缩略图（否则默认拉小原图，模糊）
layer.photos 打开后图片加载失败，优先检查 data-src 可访问性
它不发请求，只读取已存在的 data-src 值并逐个校验。哪怕只有一个 URL 404 或跨域，整个相册就可能降级为空。
- 用浏览器开发者工具检查目标
<img>元素，确认data-src属性存在且值为可访问的绝对或相对 URL - 图片受登录态保护时，确保当前页面请求携带 cookie 或 token；否则预加载时返回 401/403，但控制台常无提示
- 跨域图片需服务端配
Access-Control-Allow-Origin，否则layer.photos无法读取尺寸信息，可能卡在加载状态
data-src 写错、路径 404、跨域拦截、DOM 未挂载就调用——这些都比语法错误更难排查。
