Problem displaying dynamic image with Thymeleaf

Question

I have an application, where the user can store the profile photo.

Save the image in C:/imgPerfil/ concatenating the user id with the original image name.
Example: "2test.jpeg".

I need to show this image on the front using thymeleaf, How do you do that? The Path is saved inside the user object in the photo variable, also picked up the data by Ajax.

HTML:

<img id="fotoUsuario" class="circle" th:src="@{usuario.foto}" style="margin-left: 35%"></img>

JS:

<script type="text/javascript" charset="UTF-8">
    var nome;
    var foto;

    $.ajax({
        url: '/getPerfil',
        type: 'GET',
        success: function (perfil) {
            nome = perfil[0].nome;
            foto = perfil[0].foto;
            console.log(perfil[0]);
            $("#nomeUsuario").text(nome);
            $("fotoUsuario").attr('src', foto);
        }
    });
</script>

How to display this image?

Answer 1

Thymeleaf is a template framework, so it will take the data passed by the controller together with the template and generate the final html that will be displayed in the browser.

Theoretically I would not need to take it dynamically, since a user photo does not change constantly and if I needed to change I would make a user profile photo change service and soon after changing the photo, I would reload the page that uses the profile.

Make sure the image mapping is correct.