后端图片格式是png,怎样去接收和格式转换,然后显示在表格里面,后端给了一个接口,我不知道改怎样去写接收
请求后台接口后会返回图片链接地址的,然后再拿到渲染
{field: "headimg", title: "头像", width: 110,templet:function(d){ return '<img src="'+d.headimg+'" lay-event="show_big_img" width="80px" height="50px">';}},
上面是显示图片的,其中src="'+d.headimg+'" 这里的图片路径必须正确,也就是d.headimg图片必须正确
下面这些事点击图片放大的功能:
function show_big_img(data) {
var img=data.img_path;
var flag=(img=='')? false:true;
if(flag){
layer.open({
type: 1,
title: false,
closeBtn: 1,
skin: 'layui-layer-nobg', //没有背景色
shadeClose: true,
content: '<img style="display: inline-block; width: 100%; height: 100%;" src="'+img+'">'
});
}
}
table.on("tool(tableFilter)", function (obj) {
let data = obj.data;
switch (obj.event) {
case "show_big_img":
show_big_img(data);
break;
}
});
数据库里存图片地址时,尽量做到完整地址,同时以字符串的形式存库里,获取显示时用单独去,或者list直接放入img. src中就可以显示了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用 layui</title>
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
<!-- <link rel="stylesheet" href="./layui/css/layui.css"> -->
</head>
<body>
<div id="demo"></div>
<!-- <script src="./layui/layui.js"></script> -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
layui.use(['table'], function () {
console.log(layui, 'layui======');
table = layui.table;
let data = [
{
LAY_TABLE_INDEX: 0,
ct: 1969,
device: "50",
img: "https://www.keaidian.com/uploads/allimg/190424/24110307_8.jpg",
inter: 111
},
{
LAY_TABLE_INDEX: 1,
ct: 1959,
device: "51",
img: "https://www.keaidian.com/uploads/allimg/190424/24110307_8.jpg",
inter: 222
}
];
table.render({
elem: "#demo",
data: data,
cols: [[
{ field: "device", title: 'A' },
{ field: 'ct', title: 'B' },
{ field: 'inter', title: 'C' },
{ field: 'img', title: 'd', templet: function (d) { return '<img src="' + d.img + '" lay-event="show_big_img" width="80px" height="50px">'; } }
]]
});
});
</script>
</body>
</html>
没返回一个图片链接吗