Transforming HTML template into Thymeleaf format

Having trouble converting my HTML5 template for a spring project using Thymeleaf. I've changed all script src to th:src and style files (CSS files too) to th:href, but the design isn't displaying correctly.

<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>

After converting the tags, an exception occurs when the page is executed as shown below. The image 'glyphicons-halflings.png' is not found in the bootstrap/img folder or the template folder. Interestingly, the template functions properly without Thymeleaf.
jquery.fancybox.js?v=2.1.5:1994 GET http://localhost:8080/resources/bootstrap/img/glyphicons-halflings.png 404 (Not Found)

htmlcssspring-mvcthymeleaftemplate-engine

Answer №1

If a resource has the "http://" prefix, there is no need to use th:href. For internal site resources like "/resources/bootstrap/img/glyphicons-halflings.png", you can omit "/resources as Spring Framework will automatically add it.

Here is an excerpt from the Spring documentation for your reference: By default, Spring serves static content from directories such as /static, /public, /resources, or /META-INF/resources in the classpath or from the root of the ServletContext. It utilizes the ResourceHttpRequestHandler from Spring MVC so you have the option to customize this behavior by creating your own WebMvcConfigurerAdapter and overriding the addResourceHandlers method.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jackson in Spring-MVC fails to interpret the JSON Object sent from JQuery

Utilizing Jackson, I am able to convert the object into JSON. @RequestMapping(value="getMessage.test", headers = "Accept=application/json" ,method = RequestMethod.POST) public @ResponseBody TestObject getMessage(){ TestObject object=new TestOb ...

jqueryjsonspring-mvcjackson

Is it possible to modify the color of a bootstrap navbar dropdown upon clicking?

I am having trouble changing the color of a bootstrap navbar dropdown link when it is clicked. Currently, the color changes to teal for a moment but then reverts back to the default gray. Here is my current CSS: li.dropdown:active { background- ...

csstwitter-bootstrap

Tips for customizing the appearance of jscrollpane in EasyUI

I need help customizing the jscrollpane style in EasyUI Frozen Columns for DataGrid. I've tried changing it using the following CSS: ::-webkit-scrollbar { width: 12px; } However, it doesn't seem to have any effect. ...

cssjscrollpanejquery-easyui

Using jQuery to submit an array within a form - a comprehensive guide

My goal is to accumulate form data each time the user clicks add_accommodation and add it to an array that will be sent to the endpoint http://server/end/point. <form action="http://localhost:3000/a/b/c" method="post"> <div> <input ...

javascriptjqueryhtmlarrays

The impact of Jquery datatable version 1.10 on the dropdown component of Bootstrap version 5.1

On my website, I am utilizing Bootstrap v5.1 and Datatable v1.10 in my project. However, this version of Datatable is causing issues with the Bootstrap dropdown functionality. The dropdown menu is not opening as expected. Strangely, no errors are being gen ...

htmltwitter-bootstrapdatatablesbootstrap-5datatables-1.10

Issue with CSS background color not extending to full screen in webkit browsers when using 960.gs grid system

When using 960.gs, I have created a login screen with a div for the login form that has a background image. This div is positioned below a header, which centers it in the browser window. In my CSS, I am setting the body color as follows: body { backgr ...

htmlcss960.gs

Proper Placement of Required Field Validator Messages

I am having an issue with the validation text appearing behind my textbox instead of below it. Despite setting the display to block in the CSS class for the assignment type and start date, the validation text is not displaying properly. I have tried variou ...

c#htmlasp.netcss

Styling with CSS and Bootstrap: Looking to position two divs next to each other within another div

Here is my current code snippet: <!-- Masthead--> <header class="masthead"> <div class="container"> <div class="masthead-subheading" style="color: black;">Welcome</div> <div clas ...

htmlcssbootstrap-4

Creating intricate HTML components using jQuery/Javascript

My current challenge involves receiving data from JSON and dynamically displaying it on a web page within complex HTML structures, such as tables with lists. Every time new JSON data is received, I need my HTML elements to be dynamically regenerated. For ...

javascriptjqueryhtml

Executing a PHP function through an HTML button click while maintaining the current page state without

I have a php script: <?php $species = $_GET['species'] ...//do things to prepare the query $result = //result of the query. if (isset($_GET['download'])){ getCSV(); } function getCSV(){ if ($result->num_rows > 0){ ...

phphtmlajax

jQuery conceal input field after it has been displayed

I've created an HTML form with two different sections for search purposes. The first section displays basic fields, and by clicking on "Advanced Search" (in my case, "Расширенный поиск"), additional fields are revealed. Everything work ...

javascriptjqueryhtmlcss

I keep seeing this strange [object HTMLSpanElement] appearing on my HTML page

Thanks for the help, the issue has been resolved and I appreciate your valuable time! ...

javascripthtmljquerytags

Countdown Archive for Running Woocommerce Auction

Looking to incorporate a live countdown timer on my archive page/sliders for auction endings. Currently, I am using PHP only, but it's not live as the page needs refreshing. So, I believe JavaScript would be the best solution. The code in my function ...

javascripthtmljquerywordpresswoocommerce

Newbie inquiry regarding the setup and utilization of Bootstrap

I'm currently working on building a website and I decided to incorporate a bootstrap carousel. Initially, I had a dropdown button in the navbar along with a collapsible menu for smaller viewports which were functioning properly. However, when I added ...

javascripthtmlbootstrap-4cdn

VueJS effects when elements are added and removed

I'm currently diving into VueJS and struggling to tackle this issue with transitions. My project includes two components - ComponentA and ComponentB. Let's take a closer look at them: ComponentA: <template> <div id="ComponentA"> ...

javascriptcssvue.jsvuejs2

What is the best way to spin a div HTML layer?

I'm trying to modify a Div layer that looks like this: ... <style type="text/css"> <!-- #newImg { position:absolute; left:180px; top:99px; width:704px; height:387px; z-index:1; background-image:url(../Pictures/rep ...

javascriptcsshtml

The absence of button.onclick=func in the HTML code is notable

I am facing an issue where adding an onclick attribute to an input element via JavaScript does not display in the HTML, but the function gets executed. On the other hand, when I add the input element directly in the HTML code, the onclick attribute shows u ...

javascriptjqueryhtml

Troubleshooting CSS Code Issues on Myspace

Greetings! I am currently working on enhancing a friend's profile on myspace.com. I have two divs on each side of the screen that I want to align next to each other. I have tried using float: left; and float: right;, as well as experimenting with marg ...

cssmyspace

A versatile jQuery function for extracting values from a :input selector

Is there a universal method in jQuery to retrieve the value of any :input element? I pose this question because I have a webpage containing select and checkbox inputs, as seen in the code below: for (var i = 0; i < arguments.length; i++) { ...

javascriptjqueryhtmlselector

Out of nowhere, JavaScript/jQuery ceased to function

Everything was running smoothly on my website with jQuery Ui until I changed the color, and suddenly everything stopped working. Any ideas why this happened? I even tried writing the JavaScript within the HTML file and linking it as a separate .js file, bu ...

javascripthtml