本文摘自PHP中文网,作者尚,侵删。

layui table中显示图片的方法:
图片需要用到模板.templet:
注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < 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
阅读剩余部分
相关阅读 >>
bootstrap和layui的区别
layui如何清除表单数据
layui和后端如何连起来
layui中如何获取表格数据
layui的本地存储方法介绍
layui项目中使用函数layui.define的方法介绍
layui抓取表单数据
layui怎么实现下载功能
layui怎么使用模块化
layui后端怎么搭建
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » layui怎么做图片在列表中显示