layui中怎么表格里顯示圖片

這篇文章給大家介紹layui中怎么表格里顯示圖片，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

1、jsp代碼

<div class="demoTable">   <button class="layui-btn" data-type="publish">發布Banner</button></div><table class="layui-hide" id="banner"></table>

2、然后是js代碼

layui.use('table', function(){    var table = layui.table;  table.render({    elem: '#banner',url:'../banner/list',cols: [[     {field:'ban_id',width:20,title: 'ID', sort: true}            ,{field:'ban_img',title: '圖片',templet:'<div><img  src="{{ d.ban_img }}"></div>'}    ,{field:'ban_content', title: '備注'}    ,{field:'ban_href', title: '地址'} ]]});});

注意：這里需要注意的是，加入了templet，這里就是加入表單元素等模板

其中這個d代表的就是服務器返回的數據，ban_img是數據對應的字段名

<div class="demoTable">   <button class="layui-btn" data-type="publish">發布Banner</button></div><table class="layui-hide" id="banner"></table> <style type="text/css">    .layui-table-cell{    text-align:center;    height: auto;    white-space: normal;    }</style>

可以看到我在底部加上了樣式，這里有優先級的問題，所以必須是放在最下面，謹記！！！

原來如此，layui內部定義了這么一個樣式，所以話不多說，改！

<style type="text/css">.layui-table-cell{text-align:center;height: auto;white-space: normal;}.layui-table img{max-width:300px}

關于layui中怎么表格里顯示圖片就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。