0

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:

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

2
  • Hola @Redox, la ruta no debería ser: blablabla\ProyectDEF\src\main\resources\static\profilePics\Captura de pantalla (12).png?. Commented el 2 abr. 2023 a las 23:19
  • yo he colocado la ruta absoluta de la imagen
    – Redox
    Commented el 7 abr. 2023 a las 15:28

1 respuesta 1

0

No se como va en Java Spring en el maquetado, pero en HTML, el src se utilizara para hacer referencia a un URL, no puedes agregar simplemente una ruta de archivo de sistema como "C:\myfolder\miarchivo.png", si estas corriendo el proyecto local, la llamada en HTML del src de la imagen en local seria: "file:///C:/myfolder/miarchivo.png", o en todo caso, mejor usar una ruta relative siendo que si tu archivo HTML, esta un folder, y dentro de este folder, tienes otro con las imagenes de nombre "imagenes", entonces la ruta al recurso seria

<img src="/imagenes/miarchivo.png" />

4
  • he probado con lo que indicaste, pero sigue sin mostrarse, aún sigo atascado con ello
    – Redox
    Commented el 7 abr. 2023 a las 14:55
  • En que ruta tienes tu plantilla HTML y en que ruta esta la carpeta con imagenes?
    – AugustoM
    Commented el 7 abr. 2023 a las 17:12
  • Si tienes tu plantilla en /templates/plantilla.html, entonces para la ruta de las imagenes deberia ser src="../static/profilePics/imagen.png" por ejemplo
    – AugustoM
    Commented el 7 abr. 2023 a las 17:14
  • la ruta de la plantilla es esa, pero igualmente esa ruta no sirve tampoco, si es necesario podría compartir el link del repositorio para que veas tú el proyecto por ti mismo, que seguramente te sea más útl
    – Redox
    Commented el 12 abr. 2023 a las 14:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.