How to display pictures in layui table

The use of layui's tables is still very simple. The layui document is very detailed. The code is directly below.

If you want to know more about layui, You can click: layui tutorial

1, jsp code

<div class="demoTable">
        <button class="layui-btn" data-type="publish">发布Banner</button>
    </div>
    <table class="layui-hide" id="banner"></table>

2, and then js code

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

    table.render({
        elem: '#banner'
        ,url:'../banner/list'
        ,cols: [[
             {field:'ban_id',width:20,title: 'ID', sort: true}
                ,{field:&#39;ban_img&#39;,title: &#39;图片&#39;,templet:&#39;<div><img  src="/static/imghw/default1.png"  data-src="{{ d.ban_img }}"  class="lazy"    alt="How to display pictures in layui table" ></div>&#39;}
            ,{field:&#39;ban_content&#39;, title: &#39;备注&#39;}
            ,{field:&#39;ban_href&#39;, title: &#39;地址&#39;}
         ]]
    });
});

Note: What needs to be noted here is that template is added, here is the addition of form elements and other templates. For details, please refer to:

https://www.layui.com/doc/modules/table.html#templet

Among them This d represents the data returned by the server, ban_img is the field name corresponding to the data

This is not enough, the next thing is the key, because at this moment your table looks like this

This picture is not fully displayed at all. You can solve it like this

<div class="demoTable">
        <button class="layui-btn" data-type="publish">发布Banner</button>
    </div>
    <table class="layui-hide" id="banner"></table>

<style type="text/css">
    .layui-table-cell{
        text-align:center;
        height: auto;
        white-space: normal;
    }
</style>

You can see that I added the style at the bottom. There is a priority issue here, so it must be It is placed at the bottom, remember! ! !

But the current effect is like this:

It seems that the height is better, but what the hell is this width, so I pressed F12

So that’s it, layui has such a style defined internally, so without further ado, let’s change it!

<style type="text/css">
.layui-table-cell{
    text-align:center;
    height: auto;
    white-space: normal;
}
.layui-table img{
    max-width:300px
}

After adding the .layui-table img style, everything is done. I just set a fixed size here, you can do whatever you want~

Final effect:

The above is the detailed content of How to display pictures in layui table. For more information, please follow other related articles on the PHP Chinese website!