Estoy en un proyecto intentando mostrar imágenes de perfil para los usuarios, estos pueden subir una imagen, la cual se guarda en el propio servidor y lo que se almacena en la base de datos es la ruta a la imagen. El problema llega a la hora de mostrar la imagen, puesto que no aparece a pesar de que en la consola de chrome se ve que el atributo src es correcto, pruebo a copiar y pegar esa ruta en el navegador y se muestra, sin embargo no lo hace en el html.
Código del controlador con el que se guarda la imagen en el ordenador y su ruta en la base:
@PostMapping("/changeData")
public String cambioDatos(@ModelAttribute("usuarioActual") UsuarioNombreUsernameImageDTO user, BindingResult bidingresult, @RequestParam("imagen") MultipartFile imagen) throws IOException {
Authentication auth = SecurityContextHolder.getContext().getAuthentication();
Usuario actualUser =(Usuario) auth.getPrincipal();
// Guardamos la imagen en el sistema de archivos
String rutaImagen = "C:\\Users\\jonat\\Documents\\workspace-spring-tool-suite-4-4.17.2.RELEASE\\ProyectoDEF\\src\\main\\resources\\static\\profilePics\\";
if (!imagen.isEmpty()) {
rutaImagen = "C:\\Users\\jonat\\Documents\\workspace-spring-tool-suite-4-4.17.2.RELEASE\\ProyectoDEF\\src\\main\\resources\\static\\profilePics\\" + imagen.getOriginalFilename();
imagen.transferTo(new File(rutaImagen));
System.out.println("Ruta de destino: " + new File(rutaImagen).getAbsolutePath());
}
// Actualizamos los datos del usuario
actualUser.setNombre(user.getNombre());
actualUser.setUsername(user.getUsername());
actualUser.setRutaImagenPerfil(rutaImagen);
userService.insertarUsuario(actualUser);
return "redirect:/seguridad/password#data";
}
Fragmento del html, un campo del formulario en el que puedes cambiar tus datos:
<div class="col-md-10 ml-sm-auto px-4" id="datos">
<h1>Mis datos</h1>
<form action="#" th:action="@{/seguridad/password/changeData}" th:object="${usuarioActual}"
class="w-50 p-3" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="inputName">Nombre</label>
<input type="text" th:field="*{nombre}" class="form-control" id="inputName"
th:attr="placeholder=${usuarioActual.nombre}">
</div>
<div class="form-group">
<label for="inputUsername">Nombre de usuario</label>
<input type="text" th:field="*{username}" class="form-control" id="inputUsername"
th:attr="placeholder=${usuarioActual.username}">
</div>
<div class="form-group">
<label for="imagenPerfil">Imagen de perfil:</label>
<img th:src="@{${usuarioActual.imagenPerfil}}" class="img-thumbnail" style="max-width: 200px" /> //aquí no se muestra la imagen
<input type="file" class="form-control mb-3" id="imagenPerfil" name="imagen" accept="image/*">
</div>
<button type="submit" class="btn btn-primary mt-3 float-end">Editar</button>
</form>
</div>
Subo una imagen de la estructura de los directorios:
Security Controller es el controlador del primer código, profilePics es donde se guardan las imágenes y cambioPassword.html es el archivo donde no se muestra la imagen.
Aquí se aprecia que la ruta se establece correctamente: