Comienzo creando una lista de prueba con enlaces a una imagen. Luego se lo paso al modelo con el nombre _links
@GetMapping("/{id}") public String showItem(@PathVariable int id, Model model) { List<String> imageLinks = new ArrayList<>(); imageLinks.add("/resources/static/images/products/1/product_test_image.jpg"); imageLinks.add("/resources/static/images/products/1/product_test_image2.jpg"); imageLinks.add("/resources/static/images/products/1/product_test_image3.jpg"); model.addAttribute("_links", imageLinks); return "item/item"; } Luego, en un lugar determinado del código html, dibujo la cantidad de botones igual a la cantidad de imágenes en la lista de _enlaces .
Puedo pasar el número de ciclo al método imgSrc . Pero no puedo pasar la cadena de enlace en sí. Cuando trato de enviarlo, la página deja de mostrarse normalmente. Por lo tanto, esta línea está comentada.
<div th:each="link, iStat : ${_links}"> <span id="current_img" th:text="${link}"></span> <input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${iStat.index} + '\');'" style="width: 80px; height: 80px; margin: 3px"> <!-- <input type="image" th:src="${link}" alt="miniature" th:onclick="'imgSrc(\'' + ${link} + '\');'" style="width: 80px; height: 80px; margin: 3px"> --> </div>Y finalmente el método que estoy llamando. La última línea está comentada pero muestra lo que quiero lograr. Es decir, al hacer clic en la imagen de la lista, quiero cambiar la imagen grande a la nueva seleccionada en el bucle.
<script language="JavaScript"> var selectedImage = document.getElementById("current_img"); var mainImage = document.getElementById("main_product_image"); var debug = document.getElementById("debug"); var debug2 = document.getElementById("debug2"); function imgSrc(link) { mainImage.src = selectedImage.innerHTML; debug.innerHTML = selectedImage.innerHTML; debug2.innerHTML = link; // mainImage.src = link; } </script> Es curioso que el enlace se pase normalmente a th:text .
Gracias de antemano a todos los que respondan.
El problema fue resuelto. Aquí hay un código de prueba que muestra en el mensaje un enlace a la imagen del botón en el que hicimos clic.
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Item name</title> <link rel="stylesheet" type="text/css" href="/resources/static/css/styles.css"> </head> <body style="margin: 0"> <div class="page" style="margin: 0"> <div th:each="link, iStat : ${_links}"> <input type="image" th:src="${link}" value="Click me" onclick="buttonClick(this)"> </div> </div> <script type="text/javascript"> function buttonClick(e) { var att = e.getAttribute('src'); alert(att); } </script> </body> </html>