layer.photos() 必须传入 {photos: {data: [{src: 'xxx.jpg'}]}} 结构，单图预览 start 设为 0；旋转需在 success 回调中用 css transform 实现；缩放须监听 wheel 和 mousewheel，按鼠标比例定位中心；v2.8.16+ 已原生支持，旧版需手动补丁。
layer.photos() 必须传入正确结构才能避免白屏
直接调用 layer.photos() 但只传 src 字符串，会报错或弹出空白层——layui 要求必须是带 data 数组的对象结构。常见错误是写成 {src: 'xxx.jpg'}，实际应为：{photos: {data: [{src: 'xxx.jpg'}]}}。
表格内图片尤其容易踩坑：Layui 表格是动态渲染的，onclick="layer.photos(...)" 写在 <td> 里会失效；也不能用 <code>$('.table-img').on('click', ...) 直接绑定，因为 DOM 尚未生成。
- 正确做法是事件委托到稳定父容器，例如：
layui.$('.layui-table-body').on('click', 'td .preview-img', function() {...}) - 务必过滤空地址：
if (!$(this).attr('src')) return;，否则data数组含空项会导致预览层崩溃 - 单图预览时，
start参数设为0（默认值），别误写成1，否则首图不显示
旋转功能必须在 success 回调中注入按钮和逻辑
Layui 的预览层是异步插入 DOM 的，success 回调是唯一可靠时机。此时才能安全获取 .layui-layer-photos 容器、找到 img 元素，并挂载旋转控制逻辑。
旋转不是靠改 src 或替换 DOM，而是用 CSS transform: rotate() 动态修改图片样式。关键点在于维护一个角度变量（如 rotate = 0），每次点击按钮加减 90，再更新 img.style.transform。
- 按钮要插在预览层右上角：用
$(layerElem).find('.layui-layer-btn').before(...)或直接追加到.layui-layer-photos内部 - 必须监听
click事件并阻止冒泡，否则会触发预览层关闭 - 旋转后图片宽高可能溢出容器，需同步重设
img.style.maxWidth = 'none'和img.style.maxHeight = 'none'
鼠标滚轮缩放需同时监听 wheel 和 mousewheel 事件
现代浏览器基本支持 wheel，但 IE 和旧版 Edge 仍依赖 mousewheel。只监听一种会导致部分用户无法缩放。
缩放中心点必须是鼠标相对于图片左上角的坐标比例，而不是绝对像素值——否则图片移位、缩放偏移。计算公式固定：ratioL = (e.clientX - img.offsetLeft) / img.offsetWidth，同理算 ratioT。
- 每次滚动需调用
e.preventDefault()，否则页面会跟着滚动 - 缩放系数建议用
scale *= e.deltaY > 0 ? 0.9 : 1.1，比固定 ±0.1 更平滑 - 缩放后要重新设置
img.style.width和img.style.left，同时修正img.style.top以保持中心对齐
Layui 2.8.16+ 原生支持旋转和缩放，但旧版本需手动补丁
如果你用的是 layui v2.8.16 或更高版本，layer.photos() 已内置滚轮缩放和旋转按钮（按 R 键旋转），无需额外代码。但注意：该功能仅在 anim: 5（渐显）模式下生效，anim: 0 会禁用交互。
旧版本（如 v2.4.5、v2.6.8）必须自己实现。有人封装了独立模块 layphoto.js，但它依赖额外 CSS 图标和 font 文件，引入路径稍复杂：/static/admin/src/controller/layphoto.js，且需在 layui.use() 中显式加载。
最容易被忽略的是兼容性细节：旋转后图片的 offsetWidth/Height 会因 transform 变化而失真，后续缩放计算若直接读取这些值，会导致中心偏移。正确做法是缓存原始尺寸，在缩放逻辑中始终基于原始宽高做比例运算。
