How to import css/js in spring MVC application jsp page - spring

I am new to spring mvc , I am creating a user registration page , there I need to put external css and import external js .
I put the script tag with src and link tag with href. But i think in Spring MVC application they will not work straight forward.
For this I added resourceservlet mapping but still it is not working
I am not able to find any way how I csn include these assets in my jsp file.
Please help me to get this one.
Regards,
Pranav

Put the CSS, JS, image files, etc., into a directory (which may contain subdirectories) in your web site, and than map the requests to that directory:
<mvc:resources mapping="/resources/**" location="/public-resources/"/>
In this example the files are in the public-resources directory, and you refer to them using /resources in the link in your JSP.
For more information see Spring docs

Related

How does spring resolve .jsp page without controller mapping

I'm trying to understand the following issue. When I type url http://localhost:8076/demoproject_war/test.jsp spring is able to load test.jsp page. Here is the pic of my directory structure.
My question is how spring loads ./test.jsp even though I don't have any mappings in my controller class for ./test.jsp . Does not this request go to controller to check the mappings?
Spring does not load this JSP when you go to that URL. You're navigating directly to the JSP. It is considered a bad practice as you're not controlling the execution in this case. You should put the JSPs inside a webapp/WEB-INF directory. Then, the won't be accessible directly.

Spring Boot - Image assets are not being loaded even if they are permitted on WebSecurityConfig file

I have recently wanted to add some image on a page within my Spring Boot application, templated with Thymeleaf.
Even other assets (js, css) are being loaded and served successfully, images inside permitted img folder is not being served, a broken image is shown on the designated page.
This is where the image resides:
src/main/resources/static/img/image.png
Excerpt from WebSecurityConfig:
.antMatchers("/css/**", "/js/**", "/img/**","/uploads/**","**/favicon.ico").permitAll()
from the HTML (tried 2 ways, one with Thymeleaf and one without using th prefix):
<img class="featurette-image pull-left" th:src="#{../static/img/image.png}" />
<img src="../static/img/image.png"/>
Please guide me on how to proceed?
Ps: I am using Java DSL, instead xml based configuration.
I've made the search and and seen a couple solutions did not fit my situation. (Checked answers on these before:
Spring Security Thymleaf static resources don't load
when spring security enabled, resouces(css or js) can't be loaded
HTML Image not displaying, while the src url works
)
You don't need "static" in your reference to the image, because Spring Boot by default adds those paths to the classpath (source):
/META-INF/resources/
/resources/
/static/
/public/
So your reference to the file should be directly:
th:src="#{/img/image.png}"

Thymeleaf: can't load js and css when direct access the page

Updated: to describe the question more clearly
I create a web applicaiton with spring boot and thymeleaf, everything works fine if I open the login page, then login, then head for the management module or reports module sequently.
The proleam occurs when I type the url locahost:8080/send/kf/index(needs to authenticate, but I have open access to all in customized filter) in the browser, the page loads without js and css. In debug mode, I saw /send/kf was unexpectly put into the path like the following. I can get the resource if I access localhost:8080/assets/avatars/avatar.png.
The following is the folder structure I put my static resources. How could /send/kf automatically added into the url, please help me solve this problem. Thanks!
you can use spring.resources.static-locations in your application.properties file
spring.resources.static-locations=classpath:/resources/css/
spring.mvc.static-path-pattern=/resources/**
this is taken form documentation
Note:Static resources, like JavaScript or CSS, can easily be served from your Spring Boot application just be dropping them into the right place in the source code. By default Spring Boot serves static content from resources in the classpath at "/static" (or "/public")
Using /assets/ instead of assets/ fixes the issue, as otherwise it's a relative url that's supposed to get added to the end of existing url.
I find a solution for this question. I don't know how /send/kf is put into the url for the static resources, but I think if I put the controller mapping under the root path, this problem should avoid. As I think, the url is correct and resources can load successfully.
#Controller
public class ManualMessageController {
#Autowired
private MsgTemplateRepository msgTemplateRepository;
#RequestMapping("/manualMsg")
public String manualMsg(Model model){
model.addAttribute("msgTemplateList", msgTemplateRepository.findByStatus(1));
return "manualMessage";
}
}
updated:
The right solution is to use absolute path rather than relative path in the project. So change assets/css to /assets/css works.

Spring & static content ( css, js)

I want to create simple app, that would use css and js. But I can't reach that static content... I've found some solutions, but I wasn't able to modify them for my solution :(
Would be anybody please so kind and could show some explicit solution (where to add/modify something and what exactly to add/modify) ?
my app structure in navigator:
http://i.nahraj.to/f/gNc.jpg
Content of web.xml and servlet-context.xml http://pastebin.com/fVcNZPst
I'm running my app on tomcat server.
The home.jsp page is correct, because when I rewrite it to home.html and open it via web browser, it shows correctly. I would really appreciate any help.
There are a few issues in your structure:
a. You have put <resources mapping="/resources/**" location="/resources/" /> for mapping your resources, this would map anything with uri starting with /resources/ to locations under your webapp, in your structure that would be src/main/webapp/resources, you however don't have that folder.
b. If you want your files from webapp/css, webapp/img, webapp/js to be available either you can move them into src/main/webapp/resources folder and access them with say /resources/js/test.js uri or just put this entry into your servlet-context.xml file also - <mvc:default-servlet-handler /> - if you are interested I have provided more details here

How handle resources likes images, *.css with Spring Mvc

I've a problem with handle static resources.
It's my web-app
WebAppRoot
-resources
-css
-style.css
-imahes
-jsp
-template.jsp
-secure
-template_secure.jsp
so
myLocation=resources
How can I handle resource in a central way, for example I put location in a variable and
use this in tag
I tried with but I don't understand how have to use.
If you are using Spring 3.0.4 or later, you can use the < mvc:resources ...> element in your application configuration, and you will not need to create a Controller to handle static content for you.
It is as simple as specifying the location of your static content, and the path from which to access them:
<mvc:resources mapping="/resources/**" location="/public-resources/"/>
This uses the mvc namespace found http://static.springsource.org/schema/mvc/spring-mvc.xsd.

Resources