<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>所有图片</title>
<link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/static/layui/css/modules/layer/default/layer.css?v=3.1.1">
<script src="/static/layui/layui.js" charset="utf-8"></script>
<script src="/static/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/layui/lay/modules/layer.js"></script>
<style type="text/css">
.layui-table-cell{
text-align:center;
height: auto;
white-space: normal;
overflow:hidden;
text-overflow:ellipsis;
display:table-cell;
vertical-align: middle;
}
.layui-table img{
max-width:60px
}
.div{
width: 29%;
display: inline-block;
margin-left: 3%;
}
</style>
</head>
<body>
<!--使用tp5模板判断数据库中的列内容是否为空，为空则不显示-->
{if !empty($allImg.img0)}<div class="div">第一张图片<img src="/static/img/userplant/{$allImg.img0}" style="width: 98%"></div>{/if}
{if !empty($allImg.img1)}<div class="div">第二张图片<img src="/static/img/userplant/{$allImg.img1}" style="width: 98%"></div>{/if}
{if !empty($allImg.img2)}<div class="div">第三张图片<img src="/static/img/userplant/{$allImg.img2}" style="width: 98%"></div>{/if}
{if !empty($allImg.img3)}<div class="div">第四张图片<img src="/static/img/userplant/{$allImg.img3}" style="width: 98%"></div>{/if}
{if !empty($allImg.img4)}<div class="div">第五张图片<img src="/static/img/userplant/{$allImg.img4}" style="width: 98%"></div>{/if}
{if !empty($allImg.img5)}<div class="div">第六张图片<img src="/static/img/userplant/{$allImg.img5}" style="width: 98%"></div>{/if}
<script>
(function () {
$(".div").on('click',function (e) {
var a=e.target.outerHTML;
a=a.replace("\\", '/');//将数据库路径中的'\'替换为'/'，如果数据库中的路径是/，则不需要替换，直接将content中的内容写成e.target.outHTL即可
layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: true, //点击阴影关闭
area: '600px', //宽高
content: a
});
})
})();
</script>
</body>
</html>
效果：