layui的table中显示图片

ゝ一世哀愁。 2021-09-26 12:30 471阅读 0赞

图片需要用到模板.templet:

注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style

<script type="text/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:'<div><img src="{ { d.wx_headimg}}"></div>',style:'height:48px;width:48px;line-height:48px!important;'}

css,注意替换headimg

<style type="text/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-3-wx_headimg ,.laytable-cell-1-wx_headimg,.laytable-cell-2-wx_headimg,.laytable-cell-3-wx_headimg,.laytable-cell-4-wx_headimg,.laytable-cell-5-wx_headimg,.laytable-cell-6-wx_headimg,.laytable-cell-7-wx_headimg,.laytable-cell-8-wx_headimg,.laytable-cell-9-wx_headimg,.laytable-cell-10-wx_headimg,.laytable-cell-11-wx_headimg,.laytable-cell-12-wx_headimg,.laytable-cell-13-wx_headimg,.laytable-cell-14-wx_headimg{
        width: 48px!important;;padding:0px!important;height: 48px!important;;
        line-height: 48px!important;;
    }
    
    </style>

![请打赏谢谢大佬][70]

[70]: /images/20210923/fce320819bec46a8891f5d3219c3ff67.png

发表评论取消回复

表情：

评论列表（有 0 条评论，471人围观）

还没有评论，来说两句吧...

相关阅读

相关若依前端table中如何显示图片？

> 图片预览 `$.table.imageView` { field: 'avatar', title: '用户头像', form

雨点打透心脏的1/2处/ 2023年10月01日 07:28/ 0 赞/ 28 阅读

相关 layui 实现鼠标指向table中的图片放大显示图片

这个功能的实现，网上有不少，但是之前自己查阅的时候总是实现不了，后来同事刘表哥大佬，查阅了一下，加上自己的一些想法，实现了该功能， c v 即可使用，就感觉蛮不错的，代码理解

ゝ一世哀愁。/ 2023年07月25日 14:25/ 0 赞/ 10 阅读

相关 layui的table显示图片后，头部复选框变多了

一. 问题背景现象如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cH

朱雀/ 2023年07月15日 15:16/ 0 赞/ 148 阅读

相关 element ui table显示本地图片

背景：后端返回一个状态码，需要根据状态码显示对应的本地图片。第一步：写column。注意前面要加一截路径，比如这里…/assets/

深碍√TFBOYSˉ_/ 2022年12月15日 03:55/ 0 赞/ 284 阅读

相关 vue iview table显示图片

使用render渲染图片的代码： ![70][] 其中，图片的地址应该是使用attrs而不是经常使用的props，这点坑了自己很久。然后就是图片要想访问得到有两种方式

旧城等待，/ 2022年05月21日 08:51/ 0 赞/ 279 阅读

相关 layui table表格需要序号来显示条目数

![70][]s tittle 序号为显示字段可以改为任何名字 ![70 1][] [70]: /images/20220515/3727b5cb78a745d

冷不防/ 2022年05月15日 04:53/ 0 赞/ 238 阅读

相关 layui的table中显示图片

layui table动态表格代码 layui.use('table', function(){ var table = layui.tabl

短命女/ 2022年02月25日 10:24/ 0 赞/ 342 阅读

相关 layui数据表格显示图片/头像

先上代码 templet: '<div><img style="height:35px;width:35px;border-radius:50%;line-he

清疚/ 2022年02月20日 06:13/ 0 赞/ 607 阅读

相关 layui的table中显示图片

图片需要用到模板.templet: 注意div不可省略,48px指的是div的高度,如果要决定img图片的高度,需要单独设计style <script type="

ゝ一世哀愁。/ 2021年09月26日 12:30/ 0 赞/ 472 阅读

相关 layui中table显示图片

在table页面中加如下css .layui-table-cell{ text-align: center; height: auto; white-space: n

Bertha 。/ 2021年09月23日 11:50/ 0 赞/ 397 阅读