layui的table中显示图片方法

layui的的table中显示图片方法中显示图片方法

今天小编就为大家分享一篇layui的table中显示图片方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

图片需要用到模板图片需要用到模板.templet：：

注意div不可省略，48px指的是div的高度，如果要决定img图片的高度，需要单独设计style

<script type="text/javascript">

layui.use('table',function () {

var table= layui.table;

table.render({

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