layui表格中图片点击放大需用lay-event绑定事件并配合layer.photos，核心是将图片路径构造成含data数组的JSON结构传入，禁止直接在img标签写onclick或依赖DOM查找路径。
layui table 列内图片点击放大：用 lay-event + layer.photos
Layui 表格本身不支持原地放大图片，得靠手动绑定事件触发 layer.photos。核心是把图片路径塞进一个符合 layer.photos 要求的 JSON 结构里，再调用弹层——不是直接给 img 加 onclick，那样会丢上下文、难维护。
- 表格列模板里必须用
lay-event属性（比如lay-event="showImg"），不能只写onclick，否则table.on('tool')监听不到 - 图片路径要存在
data里（如row.imgUrl），不能靠 DOM 查找，否则翻页/重载后失效 -
layer.photos要求传入的是包含photos字段的对象，且photos.src必须是数组，哪怕只有一张图也要包成[url]
列模板怎么写才让点击生效
在 cols 配置中，用 templet 返回带 lay-event 的按钮或可点区域，别直接放 <img> 标签——它默认不可聚焦、移动端可能点不灵。
- 推荐写法：
templet: '<div class="layui-table-img" lay-event="showImg"><img src="{{d.imgUrl}}" alt="" style="max-width:80px;"></div>' - 不要写：
templet: '<img src="{{d.imgUrl}}" onclick="layer.photos(...)">'—— 这样无法统一管理事件，也拿不到d全量数据 - 如果图片字段为空，模板里加判断，避免渲染空
src导致控制台报错：{{# if(d.imgUrl){ }}<img src="{{d.imgUrl}}">{{# } }}
table.on('tool') 里怎么正确调 layer.photos
监听到点击后，不是直接 layer.photos({ photos: { src: d.imgUrl } }) —— 这会报错，因为 src 必须是数组，而且结构要对。
- 必须构造这样的对象：
{ photos: { "title": "", "id": 0, "start": 0, "data": [{ "src": d.imgUrl }] } } - 如果想支持多图（比如同一行有多个图字段），就把
data数组填满：[{src: d.img1}, {src: d.img2}] - 别漏掉
start: 0，否则默认从第 0 张开始，但没设的话 layer 有时会卡在加载态 - 加个简单防错：
if (!d.imgUrl) return;，避免空路径传进去导致 layer 报Cannot read property 'length' of undefined
table.on('tool(test)', function(obj){
var data = obj.data;
if (!data.imgUrl) return;
layer.photos({
photos: {
"title": "图片预览",
"data": [{ "src": data.imgUrl }]
},
anim: 5
});
});为什么放大后图片模糊 / 加载慢 / 不显示
不是 layer 或 layui 的锅，大概率是图片路径本身问题，或者没走通网络请求。
- 检查
data.imgUrl是绝对路径还是相对路径：如果是相对路径（如upload/1.jpg），确保页面 URL 基准正确，建议全用绝对路径或以/开头 - 浏览器控制台看 Network，点放大后有没有发请求、状态是不是
200；404 就是路径错，302 可能是登录态丢失，net::ERR_FAILED多半是跨域或路径含非法字符 - layer.photos 默认不缓存图片，反复点同一张会重复请求，大图体验差——可在
templet里提前用new Image().src = url预加载，但注意别滥用 - 移动端点击区域太小？给
.layui-table-img加padding: 4px或min-height: 36px，不然手指点不中
真正麻烦的是后台返回的图片路径带 token 参数且有时效性，这种没法预加载，得在点击时重新请求接口拿新链接——那就不能只存 URL，得存 ID，点击时再调 API 换真实地址。
