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

图片需要用到模板.templet:

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

<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的table中显示图片方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
京东拼购事业部换帅 副总裁韩瑞接替侯艳平

京东拼购事业部换帅

拼购事业部是京东此前组织架构调整后的新产物。
两部门明确集成电路设计企业和软件企业税收优惠政策

两部门明确集成电路设

为支持集成电路设计和软件产业发展,财政部、国家税务总
瑞幸咖啡迎来破发:盘中下跌4.10% 跌破发行价17美元

瑞幸咖啡迎来破发:盘中

截至到北京时间22点44分,瑞幸咖啡(Nasdaq:LK)盘中下跌4.10
高通反垄断案败诉 开盘大跌近11.1%

高通反垄断案败诉 开

高通公司(Nasdaq:QCOM)在反垄断案败诉,受此影响,高通开盘报
苹果承诺确保iPhone用户知晓电池健康和性能

苹果承诺确保iPhone用

英国竞争监管机构“竞争与市场管理局”(CMA)今日表示,苹
高通:强烈反对美国联邦贸易委员会的裁决 将上诉

高通:强烈反对美国联邦

高通表示,强烈反对美国联邦贸易委员会的裁决,并将寻求上
最新文章
JavaScript解析及序列化JSON的方法实例分析

JavaScript解析及序列

这篇文章主要介绍了JavaScript解析及序列化JSON的方法
如何为vuex实现带参数的 getter和state.commit

如何为vuex实现带参数

这篇文章主要介绍了如何为vuex实现带参数的getter和st
使用VUE+iView+.Net Core上传图片的方法示例

使用VUE+iView+.Net C

这篇文章主要介绍了使用VUE+iView+.Net Core上传图片
JS实现的获取银行卡号归属地及银行卡类型操作示例

JS实现的获取银行卡号

这篇文章主要介绍了JS实现的获取银行卡号归属地及银行
Angular6 用户自定义标签开发的实现方法

Angular6 用户自定义

这篇文章主要介绍了Angular6 用户自定义标签开发的实
React 实现拖拽功能的示例代码

React 实现拖拽功能的

这篇文章主要介绍了React 实现拖拽功能的示例代码,小编