layui怎麼表格中顯示圖片

layui的表格使用還是非常簡單的，layui文件中已經非常詳細，下面直接上程式碼了

#如果你想了解更多關於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:&#39;ban_img&#39;,title: &#39;图片&#39;,templet:&#39;<div><img  src="/static/imghwm/default1.png"  data-src="{{ d.ban_img }}"  class="lazy"    alt="layui怎麼表格中顯示圖片" ></div>&#39;}
		    ,{field:&#39;ban_content&#39;, title: &#39;备注&#39;}
		    ,{field:&#39;ban_href&#39;, title: &#39;地址&#39;}
		 ]]
	});
});

注意：這裡要注意的是，加入了templet，這裡就是加入表單元素等範本。詳情參考：

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

##其中這個d代表的就是伺服器回傳的數據，ban_img是資料對應的欄位名稱

這還不夠，接下來的才是關鍵，因為此時此刻你的表格是這個樣子的

這個圖片壓根顯示不全，可以這樣來解決

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

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

但是目前效果是這樣的：

似乎高度好了，但是這個寬是什麼鬼，於是我就F12了一下

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

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

加入了

.layui-table img樣式後，就統統搞定了，我這裡只是設了固定大小，你們可以隨意了~

最終效果：

以上是layui怎麼表格中顯示圖片的詳細內容。更多資訊請關注PHP中文網其他相關文章！