关于layui的图片显示

js 专栏收录该内容
4 篇文章 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>'
                        }
                    }}

在这里插入图片描述

  • 2
    点赞
  • 0
    评论
  • 9
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

离阳光更近一点

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值