咨询Spring Boot与Thymeleaf中点击图片获取名称或ID的方法

下面给你几种实用的实现方式，都是初学者容易上手的：

1. 纯前端JavaScript处理（无需后端交互） #

直接在前端通过JS获取图片的ID和名称，适合预览、弹窗展示这类场景：

<!-- Thymeleaf模板里的图片标签 -->
<img th:src="@{/images/photo.jpg}" 
     th:data-img-id="${image.id}"  <!-- 从后端模型绑定图片ID -->
     th:data-img-name="${image.name}"  <!-- 绑定图片名称 -->
     onclick="getImageInfo(this)" 
     th:alt="${image.name}">

<script>
function getImageInfo(imgElement) {
    // 读取自定义属性里的ID和名称
    const imgId = imgElement.dataset.imgId;
    const imgName = imgElement.dataset.imgName;
    
    // 这里可以做你需要的操作，比如打印到控制台、弹出提示
    console.log("图片ID：", imgId);
    console.log("图片名称：", imgName);
}
</script>

2. 通过表单提交到后端 #

如果需要把图片信息传给后端处理，用隐藏表单字段配合图片点击提交：

<!-- Thymeleaf模板 -->
<form th:action="@{/image/handle}" method="post">
    <!-- 隐藏字段存图片ID和名称 -->
    <input type="hidden" th:name="imgId" th:value="${image.id}">
    <input type="hidden" th:name="imgName" th:value="${image.name}">
    <!-- 点击图片触发表单提交 -->
    <img th:src="@{/images/{name}(name=${image.name})}" 
         onclick="this.parentElement.submit()" 
         th:alt="${image.name}">
</form>

后端Spring Boot控制器代码：

@PostMapping("/image/handle")
public String handleImage(@RequestParam("imgId") Long imgId, @RequestParam("imgName") String imgName) {
    // 这里写你的业务逻辑，比如存数据库、处理数据
    System.out.println("收到图片ID：" + imgId + "，名称：" + imgName);
    return "result-page"; // 返回结果页面
}

3. 通过URL参数跳转后端接口 #

点击图片跳转到后端详情接口，把ID和名称作为URL参数传递：

<!-- Thymeleaf模板 -->
<a th:href="@{/image/detail(id=${image.id}, name=${image.name})}">
    <img th:src="@{/images/{name}(name=${image.name})}" th:alt="${image.name}">
</a>

后端控制器代码：

@GetMapping("/image/detail")
public String showImageDetail(@RequestParam("id") Long imgId, @RequestParam("name") String imgName, Model model) {
    // 把图片信息传给前端页面展示
    model.addAttribute("imgId", imgId);
    model.addAttribute("imgName", imgName);
    return "image-detail"; // 返回详情页面
}

额外提示（动态图片列表场景） #

如果是遍历后端传来的图片列表，用Thymeleaf的th:each循环生成即可：

<div th:each="image : ${imageList}">
    <img th:src="@{/images/{name}(name=${image.name})}" 
         th:data-img-id="${image.id}" 
         th:data-img-name="${image.name}"
         onclick="getImageInfo(this)" 
         th:alt="${image.name}">
</div>

另外，Spring Boot的静态资源默认放在src/main/resources/static目录下，所以/images/xxx.jpg对应的就是static/images/xxx.jpg，别放错路径。

内容的提问来源于stack exchange，提问作者don