Enlace de Datos con th:href, th:src y th:action


1. Enlace de URLs con th:href

Descripción: th:href es un atributo en Thymeleaf que te permite vincular dinámicamente URLs a enlaces <a>. Es útil para generar enlaces que dependen de datos dinámicos o variables del modelo.

<a th:href="@{/usuarios/${usuarioId}}">Ver Perfil</a> <!-- Genera una URL dinámica basada en el ID de usuario -->

En el ejemplo anterior, si usuarioId tiene el valor de 15, el enlace se renderiza como <a href="/usuarios/15">Ver Perfil</a>.

2. Enlace de Imágenes con th:src

Descripción: th:src permite generar rutas dinámicas para recursos como imágenes en elementos <img>. Es útil cuando las imágenes cambian en función de los datos que se envían al modelo.

<img th:src="@{/imagenes/${imagenNombre}}" alt="Imagen dinámica" /> <!-- Genera una URL para cargar imágenes dinámicamente -->

Si imagenNombre es "foto1.jpg", la URL generada sería <img src="/imagenes/foto1.jpg">.

3. Enlace de Formularios con th:action

Descripción: El atributo th:action genera dinámicamente la acción de un formulario, es decir, la URL a la que se enviarán los datos del formulario. Esta URL puede ser dinámica y depender de variables del modelo.

<form th:action="@{/guardarUsuario}" method="post">
    <input type="text" name="nombre" />
    <button type="submit">Guardar</button>
</form>

El formulario enviará los datos al endpoint /guardarUsuario cuando se haga clic en el botón "Guardar".

🔔 Sintaxis de Enlace de URLs


En Thymeleaf, el símbolo @{} se usa para crear enlaces absolutos o relativos. Dentro de las llaves, puedes incluir variables del modelo, rutas relativas, y otras expresiones para generar dinámicamente las URLs en el HTML final.

4. Ejemplo Completo

Aquí tienes un ejemplo completo que combina el uso de th:href, th:src, y th:action:

@Controller
public class UsuarioControlador {

    @GetMapping("/perfil")
    public String perfil(Model model) {
        model.addAttribute("usuarioId", 15);
        model.addAttribute("imagenNombre", "foto1.jpg");
        return "perfil"; // Nombre de la vista Thymeleaf
    }
}

En la vista Thymeleaf:

<a th:href="@{/usuarios/${usuarioId}}">Ver Perfil</a> <!-- Genera un enlace dinámico para el perfil del usuario -->
<img th:src="@{/imagenes/${imagenNombre}}" alt="Foto de Perfil" /> <!-- Genera una URL dinámica para la imagen -->
<form th:action="@{/guardarUsuario}" method="post">
    <input type="text" name="nombre" />
    <button type="submit">Guardar</button>
</form>

En este ejemplo, el controlador pasa el usuarioId y el imagenNombre al modelo, y la vista Thymeleaf utiliza estas variables para generar dinámicamente los enlaces y recursos en el HTML final.