我尝试将css文件链接到HTML文件,就像在下一个教程https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html中所做的那样,但是当我在tomcat中运行应用程序时,html工作,但是CSS丢失,并且我在浏览器控制台上得到下一个错误"Failed to load resource: the server responded with a status of 404 ()",与此相反,如果我在没有tomcat的情况下打开html,css文件工作正常,所以我正确地指向了该文件。如果有帮助,我已经使用maven-archetype-webapp创建了项目
以下是我的项目结构
我要在其中链接css文件的HTML
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Web de productos - Inicias sesion</title>
<link rel="stylesheet" type="text/css" media="all"
href="../../css/normalize.css" th:href="@{/css/normalize.css}" />
<link rel="stylesheet" type="text/css" media="all"
href="../../css/index.css" th:href="@{/css/index.css}" />
</head>
<body> ... </body>
</html>
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>ss.webdeproductos</groupId>
<artifactId>WebDeProductos2</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<name>WebDeProductos2 Maven Webapp</name>
<!-- FIXME change it to the project's website -->
<url>http://www.example.com</url>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
</properties>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.11</version>
<scope>test</scope>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-core</artifactId>
<version>5.3.6.Final</version>
</dependency>
<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.21</version>
</dependency>
<!-- https://mvnrepository.com/artifact/org.thymeleaf/thymeleaf -->
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
</dependencies>
<build>
<finalName>WebDeProductos2</finalName>
<pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
<plugins>
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>3.1.0</version>
</plugin>
<!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>3.0.2</version>
</plugin>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.8.0</version>
</plugin>
<plugin>
<artifactId>maven-surefire-plugin</artifactId>
<version>2.22.1</version>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>3.2.2</version>
</plugin>
<plugin>
<artifactId>maven-install-plugin</artifactId>
<version>2.5.2</version>
</plugin>
<plugin>
<artifactId>maven-deploy-plugin</artifactId>
<version>2.8.2</version>
</plugin>
</plugins>
</pluginManagement>
</build>
</project>
你知道怎么解决这个问题吗?
发布于 2021-01-17 04:22:40
在您的胸腺叶模板中有href
的双重定义,请参阅href="../../css/normalize.css" th:href="@{/css/normalize.css}"
。你应该删除其中的一个-在浏览器中检查你的html源代码,路径可能与你的文件夹结构不匹配。
Thymeleaf有一个不同的基本位置来检查静态文件,如css (或js)。
由于您是以这种方式引用css文件,因此th:href="@{/css/normalize.css}"
请尝试以下文件夹结构:
在我的德语博客中,我写了一篇关于Spring Boot和Thymeleaf的文章:
https://agile-coding.blogspot.com/2020/10/spring-mvc-thymeleaf.html
我的示例代码,包括文件夹结构,可以在这里找到:
https://stackoverflow.com/questions/65752971
复制相似问题