layuiのテーブルに画像の表示方法

画像はテンプレートを使う必要があります。templet：
注意divは省略できません。48 pxはdivの高さを指します。もし、写真の高さを決定するなら、単独でスタイルを設計する必要があります。

<script type="text/javascript">

 layui.use('table',function () {
 var table= layui.table;
 table.render({
  elem:'#needstable'
  ,url:'{:url()}'
  ,method:'post'
  ,cellMinWidth:80
  ,page:true
  ,cols:[[
  {field:'needs_id',title:'id',fixed:'left',width:80}
  ,{field:'wx_username',title:'  ',fixed:'left',width:80}
  ,{field:'wx_headimg',title:'  ',fixed:'left',templet:'<div><img src="{{ d.wx_headimg}}"></div>',style:'height:48px;width:48px;line-height:48px!important;'}

css、注意して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>

以上のlayuiのテーブルに画像を表示する方法は、小編集が皆さんに提供した内容の全てです。参考にしていただければと思います。よろしくお願いします。