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

最新资讯
国产创新药为啥总是难产?新药创制:源头创新是短板

国产创新药为啥总是难

改革开放40年,我国医药工业总产值增长了410倍。但其中,
这个困扰科学家近20年的难题,被石墨烯破(kai)解(she)了

这个困扰科学家近20年

在西北工业大学纳米能源材料研究中心,却有一群热心于壁
中欧联合推出“微笑“卫星计划,探索空间天气之谜!

中欧联合推出“微笑“

中国科学院与欧洲空间局联合推出“微笑科学卫星”计划
中文在线Q3净利润预计降167% 称版税成本持续增加

中文在线Q3净利润预计

报告期内,公司持续增加对优质 IP 内容的采集,致版税成本
贝索斯的蓝色起源获美官方火箭订单 预计2024年发射

贝索斯的蓝色起源获美

蓝色起源获得5亿美元,负责开发New Glenn推进器;联合发射
“怎么得诺奖?”新任诺奖得主说“要有平常心”

“怎么得诺奖?”新任诺

北京大学物理学院思源报告厅内,数百名师生翘首以盼。在
最新文章
vue中引用swiper轮播插件的教程详解

vue中引用swiper轮播

这篇文章主要介绍了vue中引用swiper轮播插件的方法,在
JS实现的视频弹幕效果示例

JS实现的视频弹幕效果

这篇文章主要介绍了JS实现的视频弹幕效果,涉及javascr
jQuery实现的页面弹幕效果【测试可用】

jQuery实现的页面弹幕

这篇文章主要介绍了jQuery实现的页面弹幕效果,涉及jQu
深入理解Vue 组件之间传值

深入理解Vue 组件之间

这篇文章较详细的给大家介绍了vue组件之间传值的方法,
bootstrap实现点击删除按钮弹出确认框的实例代码

bootstrap实现点击删

本文通过实例代码给大家介绍了bootstrap实现点击删除
详解vue移动端项目的适配(以mint-ui为例)

详解vue移动端项目的

这篇文章主要介绍了详解vue移动端项目的适配(以mint-u