layui数据表格显示图片
2020-01-11 本文已影响0人
王哈哈就很棒
后端接口返回如下
{
"code": 0,
"count": 1000,
"data": [{
"age": 23,
"avatar": "http://pic4.zhimg.com/50/v2-2ef01343920e66f878b05ff380d902d7_hd.jpg",
"id": 1,
"name": "admin"
},
{
"age": 23,
"avatar": "http://img3.imgtn.bdimg.com/it/u=1067286080,4118108903&fm=11&gp=0.jpg",
"id": 1,
"name": "admin"
}
],
"msg": ""
}
html内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<table id="mytable" lay-filter="test"></table>
<script src="/static/layui/layui.all.js"></script>
<script>
layui.use(['layer', 'table'], function () {
var layer = layui.layer;
var table = layui.table;
table.render({
elem: '#mytable',
height: 312,
url: '/get_data',
page: true,
cols: [[
{field: 'id', title: 'id'},
{field: 'name', title: 'name'},
{field: 'age', title: 'age'},
{field: 'avatar', title: 'avatar', templet: '#img'},
{field: 'avatar', title: 'avatar2', templet: '<div><img src="{{ d.avatar }}" style="width:30px; height:30px;"></div>'}
]]
})
});
</script>
<script type="text/html" id="img">
<div><img src="{{ d.avatar }}" style="width: 30px; height: 30px;"></div>
</script>
</body>
</html>
