layui 如何获取后端png图片,并显示在表格里

后端图片格式是png,怎样去接收和格式转换,然后显示在表格里面,后端给了一个接口,我不知道改怎样去写接收

img

img

请求后台接口后会返回图片链接地址的,然后再拿到渲染

{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>

没返回一个图片链接吗