Layui 테이블에 사진을 표시하는 방법

layui 문서는 매우 간단합니다. 코드는 바로 아래에 있습니다.

layui에 대해 더 알고 싶다면 layui tutorial을 클릭하세요.

1.jsp code

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

2. 그러면 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:&#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;}
		 ]]
	});
});

참고: 여기서 주목해야 할 점은 템플릿이 추가된다는 점입니다. 여기에는 양식 요소와 같은 템플릿이 있습니다. 자세한 내용은 다음을 참조하세요.

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를 눌렀습니다

이런 경우가 있군요, 레이유 내부적으로 이러한 스타일이 정의되어 있으므로 말할 것도 없이 변경하세요!

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!