這篇文章主要介紹layui如何在表格中顯示圖片，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為宜賓等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及宜賓網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、宜賓網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

layui的表格使用還是非常簡單的，layui文檔中已經(jīng)非常詳細，下面直接上代碼了

1、jsp代碼

<div class="demoTable">
   		<button class="layui-btn" data-type="publish">發(fā)布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，這里就是加入表單元素等模板。詳情參考：

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

其中這個d代表的就是服務(wù)器返回的數(shù)據(jù)，ban_img是數(shù)據(jù)對應(yīng)的字段名

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

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

<div class="demoTable">
   		<button class="layui-btn" data-type="publish">發(fā)布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>

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

但是目前效果是這樣的：

貌似高度好了，但是這個寬是什么鬼，于是我就F12了一下

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

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

加入了.layui-table img樣式后，就統(tǒng)統(tǒng)搞定了，我這里只是設(shè)了固定大小，你們可以隨意了~

最終效果：

以上是layui如何在表格中顯示圖片的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁名稱：layui如何在表格中顯示圖片
標題網(wǎng)址：http://chinadenli.net/article10/gjesdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計、電子商務(wù)、網(wǎng)站導(dǎo)航、搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)