How to display pictures in the list in layui

How to display pictures in layui table:

Pictures need to use template.templet:

Note that the div cannot be omitted. 48px refers to the height of the div. If you want to determine the height of the img image, you need to design the style

<script type="text/javascript">

    layui.use(&#39;table&#39;,function () {
        var table= layui.table;
        table.render({
            elem:&#39;#needstable&#39;
            ,url:&#39;{:url()}&#39;
            ,method:&#39;post&#39;
            ,cellMinWidth:80
            ,page:true
            ,cols:[[
                {field:&#39;needs_id&#39;,title:&#39;id&#39;,fixed:&#39;left&#39;,width:80}
                ,{field:&#39;wx_username&#39;,title:&#39;昵称&#39;,fixed:&#39;left&#39;,width:80}
                ,{field:&#39;wx_headimg&#39;,title:&#39;头像&#39;,fixed:&#39;left&#39;,templet:&#39;<div><img  src="/static/imghwm/default1.png"  data-src="{{ d.wx_headimg}}"  class="lazy"   alt="How to display pictures in the list in layui" ></div>&#39;,style:&#39;height:48px;width:48px;line-height:48px!important;&#39;}

css separately. Pay attention to replacing the headimg

<style type="text/css">.layui-table-fixed-r td{height:58px!important;}
.layui-table-fixed-r th{height:58px!important;}
.layui-table img {
    max-width: 48px;min-height: 48px;
}


.laytable-cell-3-wx_headimg ,.laytable-cell-1-wx_headimg,.laytable-cell-2-wx_headimg,.laytable-cell-3-wx_headimg,.laytable-cell-4-wx_headimg,.laytable-cell-5-wx_headimg,.laytable-cell-6-wx_headimg,.laytable-cell-7-wx_headimg,.laytable-cell-8-wx_headimg,.laytable-cell-9-wx_headimg,.laytable-cell-10-wx_headimg,.laytable-cell-11-wx_headimg,.laytable-cell-12-wx_headimg,.laytable-cell-13-wx_headimg,.laytable-cell-14-wx_headimg{
    width: 48px!important;;padding:0px!important;height: 48px!important;;
    line-height: 48px!important;;
}

</style>

recommended ：layui framework tutorial

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