Static Resources

Up to now, we used templates to display controller data as text in the view. If we need to display an image or video, or if we want to create a link to a different file, then we need to move beyond a text output.

With Thymeleaf, we can set values for the HTML src and href attributes. Instead of hard-coding a file path or external URL inside a tag, th:src and th:href take advantage of a simpler syntax. You did this near the end of the last video when you referenced information stored in files other than the controller or the template.

Accessing Resources

Inside the resources folder, there is another directory called static. By convention, this is the location where we store files that our project needs to access—like images, CSS stylesheets, JavaScript code, etc.

th:src and th:href - Video

Code along with this final video to practice adding static resources to your codingevents project:

The starter code for this video is found at the fragments branch of the CodingEventsJava repo. The final code presented in this video is found on the static-resources branch . As always, code along to the videos on your own codingevents project.

th:src

To access a file with the standard HTML src attribute, we need to provide either a detailed or relative file path in order to establish a link. th:src shortens this process by filling in most of the file path automatically (.../project-name/src/main/resources/static). All we need to do is fill in the last portion of the file path—everything after /static.

The general syntax is:

th:src = "@{/filePath}"

Examples

If we have an image file called familyPhoto1.jpg stored in static, then we can display it in the view with an img tag as follows:

<img th:src="@{/familyPhoto1.jpg}" />

If the image is contained in an images folder inside static, then the syntax is:

<img th:src="@{/images/familyPhoto1.jpg}" />

Think of the @ symbol as representing everything in the file path up to the static folder.

th:href

The syntax for th:href is the same as that for th:src. For example, to link to a CSS stylesheet:

<link rel="stylesheet" th:href="@{/css/styles.css}" />

Check Your Understanding