I am trying to convert my html5 template for my spring project. In this project i use thymeleaf template. In order to convert, i changed all scripts src into th:src or all style files (css files to) th:href etc. But design seems wrong.
<script th:src="@{/resources/js/jquery.min.js}" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Fonts -->
<link th:href="@{http://fonts.googleapis.com/css?family=Ubuntu:400,400italic,700}" rel='stylesheet' type='text/css'/>
<link th:href="@{http://fonts.googleapis.com/css?family=Pacifico}" href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
<link th:href="@{/resources/font-awesome/css/font-awesome.css}" href='font-awesome/css/font-awesome.css' rel="stylesheet" type="text/css"/>
<!-- Bootstrap -->
<link th:href="@{/resources/bootstrap/css/bootstrap.min.css}" href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Main Style -->
<link rel="stylesheet" th:href="@{/resources/style.css}" href="style.css" />
<!-- owl Style -->
<link rel="stylesheet" th:href="@{/resources/css/owl.carousel.css}" href="css/owl.carousel.css" />
<link rel="stylesheet" th:href="@{/resources/css/owl.transitions.css}" href="css/owl.transitions.css" />
<!-- rating -->
<script th:src="@{/resources/js/rate/jquery.raty.js}" src="js/rate/jquery.raty.js"></script>
<script th:src="@{/resources/js/labs.js}" src="js/labs.js" type="text/javascript"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" th:src="@{/resources/js/product/lib/jquery.mousewheel-3.0.6.pack.js}" src="js/product/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- fancybox -->
<script type="text/javascript" th:src="@{/resources/js/product/jquery.fancybox.js?v=2.1.5}" src="js/product/jquery.fancybox.js?v=2.1.5"></script>
<!-- custom js -->
<script th:src="@{/resources/js/shop.js}" src="js/shop.js"></script>
These are the converted tags. And also when i execute my page i get the exception shown below. This image is not exist in my bootstrap/img folder also it is not exist in template folder as well. But template seems to work without Thymeleaf.
jquery.fancybox.js?v=2.1.5:1994 GET http://localhost:8080/resources/bootstrap/img/glyphicons-halflings.png 404 (Not Found)
For those resources with "http://" prefix, no need to use th:href. For those inner-site resources, "/resources/bootstrap/img/glyphicons-halflings.png", please remove "/resources", Spring Framework will append it by default.
Below is from Spring document for your reference. By default Spring will serve static content from a directory called /static (or /public or / resources or /META-INF/resources) in the classpath or from the root of the ServletContext. It uses the ResourceHttpRequestHandler from Spring MVC so you can modify that behavior by adding your own WebMvcConfigurerAdapter and overriding the addResourceHandlers method.