layui.table图片显示不全和404问题

时间:2023-03-09 18:37:24
layui.table图片显示不全和404问题

1.图片显示不全

在使用layui.table组件中,加载的图片显示不全,需重新定义CSS如下:

.layui-table-cell{
height: auto!important;
white-space: normal;
}

2.图片显示,路径404

在组件中加载图片,本人使用的是如:

{field: 'image', title: '商品图片', align:'center',width:, templet:'<div><img href="{{ d.image }}"></div>',style:'height:50px;'}

结果:图片在表格中显示,但浏览器会另外加载一张图片

layui.table图片显示不全和404问题

使用模板改正就没有这个问题:

首先定义模板,(因为是laravel框架,所以需要@来避免被解析):

    <script type="text/html" id="imgTpl">
<img src="@{{ d.avatar }}">
</script>

再在layui.table中定义:

{field: 'avatar', title: '头像', align:'center',width:150, templet:'#imgTpl'}

问题解决