layui的table中显示图片方法

layui table表格带图片，图片显示不全问题

如果要修改tabel的样式直接添加到style 就行eg:

/*隐藏table分页点击跳转按钮*/
        .layui-laypage-skip button{
            display: none;
        }

// console.log(table.checkStatus('test').data); // 获取表格中选中行的数据

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  </head>
  <body>
  <div class="demoTable">
    搜索ID：
    <div class="layui-inline">
      <input class="layui-input" name="id" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
  </div>
    <table class="layui-hide" id="test"></table>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <!--您的Layui代码start-->
    <script type="text/javascript">
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function() {
      var laydate = layui.laydate //日期
      ,laypage = layui.laypage //分页
      ,layer = layui.layer //弹层
      ,table = layui.table //表格

        table.render({
            elem: '#test'
            ,url:'a.php'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
              layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
              //,curr: 5 //设定初始在第 5 页
              ,groups: 1 //只显示 1 个连续页码
              ,first: false //不显示首页
              ,last: false //不显示尾页
            }
            ,cols: [[
              {field:'id', 100, title: 'ID', sort: true}
              ,{field:'username', 100, title: '用户名',sort: true}
          ]]
          // 响应的数据
          ,parseData: function(res){ //res 即为原始返回的数据
            return {
              "code": res.code, //解析接口状态
              "count": res.count, //解析接口总数
              "data": res.data //解析数据列表
            };
          }
          //请求的参数
          ,request: {
            pageName: 'page' //页码的参数名称，默认：page
            ,limitName: 'limit' //每页数据量的参数名，默认：limit
          }
         ,done: function () {
            // $('.layui-table .layui-table-cell > span').css({'font-weight': 'bold'});//表头字体样式

            /*$('th').css({'background-color': '#5792c6', 'color': '#fff','font-weight':'bold'}) 表头的样式 */

            // $('th').hide();//表头隐藏的样式

            // $('.layui-table-page').css('margin-top','40px');//页码部分的高度调整
          }

        });
      // 数据重载
      var $ = layui.$, active = {
        reload: function(){
          var demoReload = $('#demoReload');

          //执行重载
          table.reload('test', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
                id: demoReload.val()
            }
          }, 'data');
        }
      };

      $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });

    });
    </script>
  </body>
</html>

<?php
// 搜索
if(isset($_REQUEST['id']) && !empty($_REQUEST['id'])){
    $result = [
        'code'=>0,
        'count'=>100,
        'data'=>[
            [
                'id'=>1,
                'username'=>111,
            ],
            [
                'id'=>1,
                'username'=>111,
            ],

        ]

    ];
}else{
    $result = [
        'code'=>0,
        'count'=>100,
        'data'=>[
            [
                'id'=>1,
                'username'=>111,
            ],
            [
                'id'=>2,
                'username'=>222,
            ],
            [
                'id'=>3,
                'username'=>333,
            ],
        ]

    ];
}

echo json_encode($result,JSON_UNESCAPED_UNICODE);  //JSON_UNESCAPED_UNICODE防止中文乱码

注重细节——关注底层——注重细节——关注底层——注重细节——关注底层——注重细节——关注底层——注重细节——关注底层