layui 表头添加图片

在Layui中，可以通过在表头中添加HTML标签，来实现在表头中添加图片的效果。具体的步骤如下：

1. 在表头中添加一个th标签，并设置其宽度和高度。

<th style="width: 100px; height: 50px;"></th>

2. 在th标签中添加一个img标签，并设置图片地址和大小。

<th style="width: 100px; height: 50px;"><img src="图片地址" style="width: 20px; height: 20px;"></th>

3. 通过CSS样式对img标签进行定位，让其居中显示。

<th style="width: 100px; height: 50px; position: relative;"><img src="图片地址" style="width: 20px; height: 20px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);"></th>

通过以上三个步骤，就可以在Layui表头中添加图片了。其中，第三步的CSS样式可以根据具体情况进行调整，以实现更好的效果。

相关问题

layui table 的表头添加自定义图片

可以使用 layui 的 table 模块的 templet 属性来实现表头添加自定义图片的效果。具体操作如下：

1. 在表头中使用 templet 属性来自定义表头内容，例如：

<th lay-data="{field:'img', templet:'#imgTpl'}">图片</th>

2. 在页面中添加模板代码：

<script type="text/html" id="imgTpl">
  <img src="图片路径" alt="图片描述">
</script>

其中，#imgTpl 是模板的 ID，可以根据需要自行修改。

3. 在 JavaScript 代码中使用 table 模块的 render() 方法来渲染表格，例如：

layui.use('table', function(){
  var table = layui.table;

  //渲染表格
  table.render({
    elem: '#test',
    url: '/demo/table/user/',
    cols: [[
      {field:'id', title:'ID', width:80},
      {field:'username', title:'用户名', width:120},
      {field:'img', title:'图片', templet:'#imgTpl'},
      {field:'email', title:'邮箱', width:150},
      {field:'sign', title:'签名', width:200},
      {field:'sex', title:'性别', width:80},
      {field:'city', title:'城市', width:100},
      {field:'experience', title:'积分', width:80},
      {field:'ip', title:'IP', width:120},
      {field:'logins', title:'登入次数', width:100},
      {field:'joinTime', title:'加入时间', width:120},
    ]]
  });
});

在上述代码中，#test 是 table 的 ID，/demo/table/user/ 是表格数据的接口地址。其中，cols 数组定义了表格的列，包括自定义的图片列。

通过上述方法，就可以实现 layui table 的表头添加自定义图片的效果了。