layui表格内放置图片，并点击放大

最新推荐文章于 2024-12-27 14:12:58 发布

原创最新推荐文章于 2024-12-27 14:12:58 发布 · 1.4w 阅读

15 ·

CC 4.0 BY-SA版权

Layui 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种在表格中展示品牌图片并实现点击放大功能的方法。通过使用layui-layer插件，可以实现在弹窗中预览大尺寸图片的效果，增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

cols: [[ //表头
		 {
            field: 'brand_img_url',
            title: '图片',
            sort: true,
            templet: function(d){
                return '<div onclick="show_img(this)" ><img src="'+d.brand_img_url+'" alt="" width="50px" height="50px"></a></div>';
            }
        }
		]]

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