layui加载图片

1.

 cols: [[
                {type: "checkbox", width: 50 },
                {field:'id', width:150, title: 'ID',hide: true},
                {field: 'hotelimg', width: 150 ,minHeight:200, title: '图片',align: "center",templet: "#imgtmp"},
                {field: 'name', width: 150, title: '酒店名称'},
                {field: 'createTime', width: 150, title: '开始时间', sort: true},
                {field: 'endTime', width: 150, title: '结束时间', sort: true},
                {field: 'phone', title: '手机', minWidth: 150},
                {field: 'describes', title: '描述', minWidth: 150},
                {field: 'price', width: 150, title: '价格', sort: true},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],

2.script

<!--加载图片-->
<script type="text/html" id="imgtmp">
     <img style="height: 100px ;width: 100px " src="{{d.hotelimg}}">
</script>

3.图片显示不全

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

 

posted @ 2021-12-05 15:07  java璀璨小菜鸟  阅读(504)  评论(0)    收藏  举报