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>
	});
}