Article Directory
The reference problem of static resources in the SpringBoot + Thymeleaf project is a very common problem and the most troublesome problem. In fact, it is not difficult at all, but there are a few problems that cannot be solved without notice.
1. The location of static resources
1.1. When the SpringBoot project is running, Thymeleaf is required to reference static resources.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="../static/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
</head>
It cannot be quoted without Thyemeleaf.
1.2. When static resources are not configured, they are in the resources/static directory by default.
The project directory is as follows. The
default directory for static resources is resources/static, so to quote static resources here, you need to write as follows:
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css" th:href="@{/bootstrap/css/bootstrap.css}">
</head>
1.3. You can also specify the location of static resources in the configuration file
In the application.properties configuration file:
spring.resources.static-locations=classpath:static/bootstrap
Set the location of static resources to resources/static/bootstrap.
At this point, the static resources referenced in HTML should be written like this:
<head>
<meta charset="UTF-8">
<title>Home</title>
<link rel="stylesheet" href="../static/bootstrap/css/bootstrap.css" th:href="@{/css/bootstrap.css}">
</head>
2. The most probable reason cannot be cited
All files of the SpringBoot project must be compiled to the target folder to run, so first check whether there are static resources in your target directory.
If there are no static resources at all here, they will certainly not be quoted.
What is the reason that there are no static resources in the target/classes folder?
The most likely reason is that in the pom file of the project, you did not specify to compile these files such as .css, .js into the target folder. It must be stated that these files will be compiled correctly.
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*.*</include>
</includes>
<filtering>true</filtering>
</resource>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
<include>**/*.yml</include>
</includes>
<filtering>true</filtering>
</resource>
</resources>
</build>
It is stated here that in the resources directory, **/*.*type files will be compiled into the target/classes folder, that is, all files, so the .css and .js class files can be compiled correctly.
If it is changed to the following:
<build>
<resources>
<resource>
<directory>src/main/resources</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
<include>**/*.yml</include>
</includes>
<filtering>true</filtering>
</resource>
<resource>
<directory>src/main/java</directory>
<includes>
<include>**/*.properties</include>
<include>**/*.xml</include>
<include>**/*.yml</include>
</includes>
<filtering>true</filtering>
</resource>
</resources>
</build>
It means that only the .properties files, .xml files, and .yml files under resources are compiled into the target/classes folder. Naturally, there are no static resources and no way to reference them. The compiled target folder is as follows: It
can be seen that according to the above pom file, there is no static resource in the compiled target/classes folder at all, and it is impossible to successfully reference.