layui实现图片展示

首先

 

注意：这里需要注意的是，加入了templet，这里就是加入表单元素等模板。详情参考：

https://www.layui.com/doc/modules/table.html#templet

其中这个d代表的就是服务器返回的数据，ban_img是数据对应的字段名

这还不够，接下来的才是关键，因为此时此刻你的表格是这个样子的

 

 

 

这个图片压根显示不全，可以这样来解决

 

 

<style>
    .layui-table-cell{
        text-align: center;
        height: auto;
        white-space: normal;
    }
</style>

 

 

 

最终结果

 

 

 如果觉得太别扭，可以自己改样式 例如：

    .layui-table img{
        max-width: 300px;
    }

 

 

 这样就可以了！

 

下面补充一个知识

Layui数据表格条件判断 更换数字状态