I am new spring boot and thymeleaf.
i have try adding css file to my html file in spring boot. but nothing work
it is not working for me
<link rel="stylesheet" th:href="#{/main.css}">
my css file in under
static
---| css
---| main.css
The static directory is served from /.
For example, src/main/resources/static/main.css will be served from /main.css whereas src/main/resources/static/css/main.css will be served from /css/main.css.
try out this it will work for you:
<link rel="stylesheet" th:href="#{/css/main.css}"/>
Anywhere beneath src/main/resources/static is an appropriate place for static content such as CSS, JavaScript.The src/main/resources/templates folder is intended for view templates that will be turned into HTML by a templating engine such as Thymeleaf.
This will surely work.
<link rel="stylesheet" th:href="#{/css/main.css}"/>
Try out this:
<link rel="stylesheet" href="../static/css/main.css" type="text/css" th:href="#{/main.css}">
Please let me know if it works or not !!
Be sure that your HTML file is in the templates folder if not please drag it to the templates folder then add
<link rel="stylesheet" th:href="#{/css/main.css}"/>
in your HTML file.
Related
I use spring boot.
intellij IDEA does not see resources. How to make intellij IDEA see resources?
enter image description here
You need to change the href:
<link rel="stylesheet" type="text/css" href="/static/css/bulma.css">
That's because your template folder is in the same level as static
my spring boot application always download favicon as a file
as follow is my index.html link.
<link rel="shortcut icon" href="static/page-favicon.ico" type="image/x-icon" sizes="16x16"/>
when click any link，it will download a favicon.ico
chrome debug screenshot
I am fighting the css/js access problem in my gwt+spring security simple application. So, i have secutiy controller with the next method:
#GetMapping(value = "/notes")
public ModelAndView index(ModelAndView modelAndView) {
modelAndView.setViewName(VIEW_NOTES);
return modelAndView;
}
By the way, I integrated these technologies according to this article. So, thanks to this controller method (I use RestController) we've got resolved view (simple as ****):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Notes</title>
<link rel="stylesheet" type="text/css" media="all"
href="../static/css/notes-main.css"></link>
</head>
<body>
<!-- This script tag is what actually loads the GWT module. The -->
<!-- 'nocache.js' file (also called a "selection script") is -->
<!-- produced by the GWT compiler in the module output directory -->
<!-- or generated automatically in development mode. -->
<script language="javascript" src="notesgwtapp/notesgwtapp.nocache.js">
</script>
<!-- Include a history iframe to enable full GWT history support -->
<!-- (the id must be exactly as shown) -->
<iframe src="javascript:''" id="__gwt_historyFrame"
style="width:0;height:0;border:0"></iframe>
<div id="notes"></div>
</body>
</html>
Now is the most interesting thing that I have these two errors:
GET http://localhost:8080/static/css/notes-main.css 403
GET http://localhost:8080/notesgwtapp/notesgwtapp.nocache.js 403
I dont have problems with resolving resources for other views, btw.
Please help, how can I handle it? If i miss some important part of code, I will add it. Just ask. Thank you in advance.
By default Sprint Boot permits all access to /js/**, /css/**, /images/**. But you try to access /static/** and /notesgwtapp/** which will result in the 403 error (see here).
There are two solutions:
Make sure that the notesgwtapp.nocache.js and the notes-main.css file end up in one of the above folders or
Override the SecurityConfig of your Spring Boot app and add the /static/** and /notesgwtapp/** folder to the permitted locations.
I am trying to reference to my css files as shown in the image. Since my index.html is in the templates folder, i have to go back 1 level up(../), and then go into static/css/{the file that i want}. However, this fails to render my css and js files. What am i doing wrong here? I am using thymelead templating engine for this spring boot application. Please help thank you
Spring-Boot and Thymeleaf works well together. By default Spring-Boot look up for static resources in those folders.
/META-INF/resources
/resources/
/static/
/public/
So you dont need to go back to any upper level. Your reference should normally work like that:
<link rel="stylesheet" href="/css/bootstrap.min.css" th:href="#{/css/bootstrap.min.css}" />
I have problem to load the file under static folder on spring boot application.
The problem is RequestMapping depth more than 2 like #RequestMapping("spring/xyz")
The #RequestMapping("spring") single depth works well but 2 depth is prefixed 'spring' it is connect localhost:8080/spring/'static folder'
I found half solution here
my folder structure is:
static/css/some.css
static/templates/velocity.vm
case 1: works well
java:
#RequestMapping("spring")
html:
<link rel="stylesheet" href="css/some.css">
case2: works well
java:
#RequestMapping("spring/xyz")
html:
<link rel="stylesheet" href="../css/some.css">
case3: not working
java:
#RequestMapping("spring/xyz/123")
html:
<link rel="stylesheet" href="../css/some.css">
it is called 'http//localhost/spring/xyz/css/some.css'
case3: works well
java:
#RequestMapping("spring/xyz/123")
html:
<link rel="stylesheet" href="../../css/some.css">
case4: works well
java:
#RequestMapping("123")
html:
<link rel="stylesheet" href="../../css/some.css">
It works!! even if I use ../../ relative path.
I don't know why this works.
Actually I didn't understand Spring Boot API well that I consider use ViewResoler something load other static resources.
I want to know this load path machanism and how to the RequestMapping url path link to call the 'http//localhost/spring/xyz/css/some.css'
I appriciate any answer thanks~!!
I refer to the same issue on spring.io here from 'metalhead' and 'Brian Clozel'
if you are using thymeleaf you can also specify the path as :
<link rel="stylesheet" th:href="#{/css/main.css}"
href="../static/css/main.css" />
it worked properly for me for any depth.