layui数据表格中展示图片及图片预览

在项目中遇到数据表格中放入图片同时可以点击放大预览。预览方式我才用的是layer方式。代码如下：

layui.use('table', function(){
  var table = layui.table;
  table.render({
    elem: '#screen-table'
    ,url:'./json/area'
    ,toolbar: '#toolbarDemo'
    ,title: '用户数据表'
	, defaultToolbar: ['filter', 'print']//数据表格工具栏右侧关闭导出按钮
    ,cols: [[
      {type: 'numbers', fixed: 'left', title:'序号'}
      ,{field:'image', title:'区域图片', templet: function(d) { return '<div onclick="show_img(this)" ><img src="'+d.image_path+'" ' + 'alt="" width="50px" height="50px"></a></div>'; }}
      ,{field:'area', title:'区域名称'}
      ,{field:'cities', title:'地市州'}
      ,{field:'level', title:'推荐级别'}
      ,{field:'rim', title:'周边人流量'}
	  ,{field:'expense', title:'消费能力'}
	  ,{field:'time', title:'添加时间'}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:80}
    ]]
    ,page: true //开启分页
    ,limits: [10,30,50]  //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
    ,limit: 10 //每页默认显示的数量
  });
});

templet: function(d) { return ‘

<img src="’+d.image_path+’" ’ + ‘alt="" width=“50px” height=“50px”>

’; } 数据表格中插入图片

预览代码：

function show_img(t) {
	var t = $(t).find("img");
	//页面层
	layer.open({
		type: 1,
		title: '区域图片',
		skin: 'layui-layer-rim', //加上边框
		area: ['80%', '80%'], //宽高 t.width() t.height()
		shadeClose: true, //开启遮罩关闭
		end: function (index, layero) {
			return false;
		},
		content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
	});
}

最终实现效果图：