layui的table中显示图片方法

今天，长沙网络推广要为大家分享一个非常实用的技巧——如何在layui的table中显示图片。这一方法具有很好的参考价值，相信对大家都会有很大的帮助。接下来，让我们一起跟随长沙网络推广的步伐，看看如何操作吧。

以下是相应的JavaScript代码示例：

```javascript

layui.use('table', function() {

var table = layui.table;

table.render({

elem: 'needstable',

url: '{:url()}',

method: 'post',

cellMinWidth: 80,

page: true,

cols: [[

{field: 'needs_id', title: 'id', fixed: 'left', width: 80},

{field: 'wx_username', title: '昵称', fixed: 'left', width: 80},

{field: 'wx_headimg', title: '头像', fixed: 'left', templet: '

', style: 'height:48px;width:48px;line-height:48px!important;'}

]]

});

});

```

我们还需要通过CSS来控制图片的显示样式。请确保替换headimg的相关样式。以下是相应的CSS代码示例：

```css

.layui-table-fixed-r td {height: 58px!important;}

.layui-table-fixed-r th {height: 58px!important;}

.layui-table img {

max-width: 48px;

min-height: 48px;

}

.laytable-cell-wx_headimg {

width: 48px!important;

padding: 0px!important;

height: 48px!important;

line-height: 48px!important;

}

```

以上就是长沙网络推广分享给大家的全部内容了，关于如何在layui的table中显示图片。希望这个小技巧能给大家提供一些帮助和启发。也希望大家能够支持并关注长沙网络推广的更多分享。如果有任何疑问或建议，欢迎随时与我们交流。也请大家多多关注狼蚁SEO，我们会不断为大家带来优质的内容。