LayUI表格中优雅显示图片的多种方法

前言

在后台管理系统中，表格展示图片是常见需求。LayUI作为流行的前端UI框架，其表格组件提供了灵活的模板机制，让图片显示变得简单。本文将从基础实现、样式优化、交互增强三个方面，带你掌握layui表格显示图片的完整方案。

一、基础实现：使用自定义模板

LayUI表格的cols配置支持templet属性，可以直接返回HTML字符串或使用函数动态生成。例如：

cols: [[
  {field:'avatar', title:'头像', width:100, templet:'#imgTpl'}
]]

在页面中定义模板：

这样数据中的图片URL就会自动渲染成标签。

二、样式优化：统一尺寸与圆角

直接显示图片可能大小不一，影响美观。可以在模板中固定宽高，并添加对象覆盖（object-fit）属性：

这样所有图片都会被裁剪为统一的正圆形，适合用户头像场景。

三、交互增强：点击预览大图

使用LayUI的layer.photos方法可以实现点击图片放大预览。在模板中绑定点击事件：

注意：需要引入layer模块。更优雅的做法是使用图片懒加载插件（如layui.laytpl结合图片占位），但推荐直接使用layer的相册功能。

四、进阶：图片懒加载与占位图

当表格数据量大时，一次性加载所有图片会拖慢页面。可以使用图片懒加载，只显示可视区域的图片。LayUI没有内置懒加载，但可以配合第三方插件（如jquery.lazyload）或自定义滚动监听。更简单的做法是使用loading占位：

然后通过JS将data-src赋值给src，实现懒加载效果。

五、完整示例：封装为公共函数

建议将图片显示封装成公共函数，方便复用：

function imgTpl(src, width, height) {
  var style = 'width:'+(width||50)+'px;height:'+(height||50)+'px;object-fit:cover;border-radius:4px;';
  return '';
}

在templet中调用：templet: function(d){ return imgTpl(d.avatar, 60, 60); }

结语

通过上述方法，你可以在LayUI表格中轻松显示并优化图片。推荐根据业务场景选择合适方式：简单展示用模板，交互要求高则结合layer预览。希望本文能帮助你提升表格的视觉效果与用户体验。