Comment afficher des images dans le tableau layui

L'utilisation des tables de layui est très simple La documentation de layui est très détaillée Le code est directement en dessous

Si vous souhaitez en savoir plus sur layui, vous pouvez. cliquez sur : tutoriel layui

1. code jsp

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

2.

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="{{ d.ban_img }}" alt="Comment afficher des images dans le tableau layui" ></div>&#39;}
		    ,{field:&#39;ban_content&#39;, title: &#39;备注&#39;}
		    ,{field:&#39;ban_href&#39;, title: &#39;地址&#39;}
		 ]]
	});
});

Remarque : ce qu'il faut noter ici, c'est que des modèles sont ajoutés, voici des modèles tels que des éléments de formulaire. Pour plus de détails, veuillez vous référer à :

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

où Ce d représente les données renvoyées par le serveur, ban_img est le nom du champ correspondant aux données

Ceci ne suffit pas, la prochaine chose est la clé, car à ce moment votre table ressemble à ça

Cette image n'est pas entièrement affichée du tout Vous pouvez la résoudre comme ça

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

Vous pouvez voir que j'ai ajouté le style en bas. en bas. Il y a un problème prioritaire ici, donc il doit être placé en bas, rappelez-vous ! ! !

Mais l'effet actuel est comme ceci :

Il semble que la hauteur soit meilleure, mais qu'est-ce que c'est que cette largeur, alors j'ai appuyé sur F12

Ça y est, layui a un tel style défini en interne, alors sans plus tarder, changeons-le !

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

Après avoir ajouté le style

, tout est fait. Je viens de définir une taille fixe ici, vous pouvez faire ce que vous voulez~.layui-table img

Effet final :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!