So zeigen Sie Bilder in der Liste in Laui an

So zeigen Sie Bilder in der Laui-Tabelle an:

Bilder müssen template.templet verwenden:

Beachten Sie, dass sich 48px auf die Höhe des Div bezieht. Wenn Sie die Höhe des IMG-Bildes bestimmen möchten, müssen Sie den Stil

<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="{{ d.wx_headimg}}"></div>&#39;,style:&#39;height:48px;width:48px;line-height:48px!important;&#39;}

CSS separat entwerfen. Bitte ersetzen Sie die Überschrift

<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>

empfohlen:Layui-Framework-Tutorial

Das obige ist der detaillierte Inhalt vonSo zeigen Sie Bilder in der Liste in Laui an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!