layui table table with pictures, the picture is not completely displayed

I did n’t pay attention to this. Someone asked about it today, so just record it.

The layui form is very simple to use, the layui document is very detailed, the code is directly below

1.jsp code

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

2. Then the js code

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: '地址'}
		 ]]
	});
});

  Note : The thing to note here is that the templet has been added, and here is the addition of templates such as form elements. For details, please refer to: https://www.layui.com/doc/modules/table.html#templet

Where d represents the data returned by the server, and ban_img is the field name corresponding to the data

This is not enough, the next one is the key, because at this moment your table looks like this

This picture is not displayed at all, it can be solved like this

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

As you can see, I added a style at the bottom. There is a priority problem here, so it must be placed at the bottom, remember! ! !

But the current effect is this:

It seems that the height is good, but what the hell is this width, so I just F12

It turned out that layui defined such a style internally, so I won't say much, change!

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

After adding the .layui-table img style, it's all done, I just set a fixed size here, you can feel free ~

final effect:

Brothers who solve or like brothers like to praise! Hope to help everyone

My personal original, if there is any similarity, is purely coincidental, or contact me to make changes. Please reprint or CV combination indicate the source, thank you! (If you have any questions or errors, please point out, I QQ: 752231513)