关于layui的图片显示

最新推荐文章于 2024-08-15 11:02:18 发布

离阳光更近一点

最新推荐文章于 2024-08-15 11:02:18 发布

阅读量1.4w

点赞数 2

分类专栏： # js 文章标签： layui javascript ecmascript

本文链接：https://blog.csdn.net/kawayiyy123/article/details/99541052

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

标题关于layui的图片问题

1.图片显示的js代码

①：图片显示

  , {field: 'fileUrl', title: '附件', align: 'center',sort:false,
                  templet:function (d) {
                      return '<div οnclick="photograph(this)"><img src='+d.fileUrl+'></div>'
                  }}

效果：

在这里插入图片描述

②：点击图片图片变大

function photograph(t) {

    var t = $(t).find("img");
    if(t == null||t == ''){
        return;
    }
    layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        area: ['75%', '85%'], //宽高
        shadeClose: true, //开启遮罩关闭
        end: function (index, layero) {
            return false;
        },
        content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
    });
}

效果：

在这里插入图片描述

③：如果想以按钮的样式展示，下图为老新对比

效果：

{field: 'fileUrl', title: '附件', align: 'center',sort:false,
                    templet:function (d) {
                        if(d.fileUrl == ''||d.fileUrl==null){
                            return '';
                        }else {
                            return '<div style=\'color:#00F\' οnclick=\'photograph(this)\'><a href =\'#\'> <div style=\'color:#009668\'>查看</div></a>><img src=' + d.fileUrl + '></div>'
                        }
                    }}