How to embed images in html in Spring?

Question

IntelliJ IDEA

Good day. I am making a small site about artists and their paintings. There was a question. How to insert an image, let's say in this form where the inscription "Thumbnail" is located?
Here is the window in which you want to insert an image (artist's picture)
This is how the site looks like in full:

<div class="album py-5 bg-light">
        <div class="container">

            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                <div class="col">
                    <div class="card shadow-sm">
                        <svg class ="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

                        <div class="card-body">
                            <p class="card-text">Siskin</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card shadow-sm">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

                        <div class="card-body">
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card shadow-sm">
                        <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>

                        <div class="card-body">
                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
                                </div>
                                <small class="text-muted">9 mins</small>
                            </div>
                        </div>
                    </div>
                </div>

I understand that you also need to configure Thymeleaf?
I would like to understand how to do this, do not judge strictly, I'm new in Spring.
Thanks in advance!

Answer 1

Good afternoon.
First of all, I strongly recommend that you search this site, as well as google it, since the answer to your question is easily searched for by a search engine and, in general, you will find a bunch of answers. I remember answering a similar question here just a couple of months ago.
Now, regarding your question:

I understand that you also need to configure Thymeleaf?

You need a template anyway. Be it thymeleaf or freemarker, mustache, etc. You can take thymeleaf.
I will assume that some kind of dynamic addition of pictures to the template is expected. Those. artists upload their work, and then they are displayed in the template.
If so, then we will divide your task into several parts:
1) Implement the loading of images, storing data about images in the database (for example, the path to the image)
https://spring.io/guides/gs/uploading-files/
https:// stackabuse.com/uploading-files-with-spring-boot
https://www.baeldung.com/spring-file-upload
2) Implement image output in the template.
In your example, you have an image in svg format (placeholder)
You need to add an img tag instead
Something like this:
<img th:src="${image}" alt="Картинка"/>
Of course, instead of the image variable, you need to substitute your own variable.
If you need to display a block with all the artist's works, then you will need to display a cycle with his works.
We iterate over the list of the artist's works - https://habr.com/en/post/351132/