如何在Layui table里点击放大图片？

Question

Layui前台，PHP后台数据
如何在Layui table里点击放大图片？

PHP读取数据库，json输出，id,name,userIcon，数据库里仅仅显示图片的名称。

<script src="./layui/layui.all.js" charset="utf-8"></script>
  <script>
    layui.use('table', function () {
      var table = layui.table;
      var laydate = layui.laydate;
      var form = layui.form;
      var $ = layui.jquery;
                
      //绑定时间选择器
     laydate.render({
        elem:'#start'
      })
      laydate.render({
       elem:'#end'
      })
        
      var tableIns = table.render({
        elem: '#test1'
        ,url: './demo_news_data.php'
        ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        ,title:'公告窗'
        ,loading:true
        ,height:'full-100'
        //,totalRow: true //开启合计行(在这里开启合计)
        ,cols: [
          [
            {field: 'id', title: 'ID', sort: true, style: 'font-size:12px'}
          , {field: 'sample_picture', title: '明细', align:'center', align:'center',templet: "#picPathItem"}
          , {fixed: 'right', title:'编辑', toolbar: '#operation',style: 'font-size:12px'}
          ]
        ],
        where:{
        }
        , page: true
        , limits: [50,100,150,200,250,300,350,400,450,500]
        , limit: 50 //每页默认显示的数量
          
      });
 </script>


 <!--图片展示-->
    <script type="text/html" id="picPathItem">
       <img src="/demo_icon/{{d.sample_picture}}" style="cursor: pointer; width:50px"  onclick="photograph(this)"/>
    </script>

<script>
    // 点击图片变大
function photograph(t) {
    //if(t.src == null||t.src == ''){
        //return;
    //}
    console.log(t)
    layer.open({
        type: 1,
        skin: 'layui-layer-nobg', //加上边框
                 title: false,
                 closeBtn: 0,
                 shadeClose: true, //点击阴影关闭
        area: ['60%', '70%'], //宽高
        area: [$(t).width + 'px', $(t).height + 'px'], //宽高
        shadeClose: true, //开启遮罩关闭
        end: function (index, layero) {
            return false;
        },
        content: '<div style="text-align:center"><img src="' + t.src + '" /></div>'
    });
}
</script>

当前点击图片可以放大一点，但图片并不是显示的原始大小，也就是并没有完全放大。如下：

Answer 1

显示userIcon吗？
templet: function (userIcon){
let img="";
return img
}