springboot+layui动态插入图片和点击弹出放大

最新推荐文章于 2021-12-28 16:51:17 发布

深海游摆深秋入林

最新推荐文章于 2021-12-28 16:51:17 发布

阅读量717

点赞数

CC 4.0 BY-SA版权

分类专栏： 2019/8 文章标签： layui springboot 照片

本文链接：https://blog.youkuaiyun.com/qq_41016343/article/details/99863150

这篇博客介绍了如何使用SpringBoot和LayUI框架动态插入图片并实现点击图片放大、点击外部缩小的功能。首先展示功能需求，接着通过在表单中创建隐藏文本框接收照片数据，然后利用JavaScript进行图片的动态插入和遍历。通过监听点击事件，当点击图片时，使用layui的弹窗功能显示大图。

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

首先我们先看一张图片，看下是不是客官你所需要找的

在这里插入图片描述

功能：动态插入标签图片，点击图片放大，点击大图外的任意地点即放小

老baby我们开始吧

先上图后讲解

在这里插入图片描述
由于我们每个图框里都会不规定的有多张图片，那这样的话我们就要动态的插入图片了。首先在form表单中我们做一个隐藏的文本框用于接受遍历照片数据

<input type="hidden" th:value="${siteRoom.meterpic}" id="meterpicid">

我们使用var meterpicid=$("#meterpicid").val();取出遍历的照片名字
var meterpicidnum=meterpicid.split(",");为切割，由于我们数据库存储的照片是一个字段存储多张的照片的名字的，所以要切割开单独取出名字

 for (var i=0;i<meterpicidnum.length;i++){

        htmlimg+="<img style='width:150px;height:128px' src='"+imgServerPath+meterpicidnum[i]+"' class='layui-upload-img'></img>";
}
}else {
    document.getElementById("meterpic").parentNode.innerHTM="[无图片]";
}

document.getElementB