I have a Spring Boot Application. I am trying to load to my HTML file a CSS file, but probably I am doing something wrong. In Spring MVC Project I've done something like this:
In HTML file I added the following line:
<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet">
And in mvc-dispatcher-servlet.xml I added following code:
<mvc:resources mapping="/resources/**" location="/resources/"
cache-period="31556926"/>
<mvc:annotation-driven />
And everything worked perfect.
Now I'm using thymeleaf templating language and load my CSS file like that:
<link rel="stylesheet" type="text/css" th:href="#{/assets/css/style.css}" />
My project files hierarchy is following:
In current project I don't have WEB-INF directory so I don't have such a files like mvc-dispatcher-servlet.xml or web.xml so I don't know if I should or where I should paste that code with resources mapping. Im completely new to Spring so I apologise for my lack of knowledge.
Any tips and solutions will be much appreciated.
Related
I use eclipse, springmvc and maven. I created a folder under
Web-Content --> WEB-INF --> resources
I added the following into my servlet:
<mvc:resources mapping="/resources/**" location="/WEB-INF/resources/" />
<mvc:annotation-driven />
Then I try to include a picture into my index.jsp file.(Web-Content->index.jsp)
<img src = "/resources/images/Logo.png" />
But it's not loading my image. I tryed many tutorials but it doesn't work. I guess I'm something basic wrong. Can you tell me whats wrong?
EDIT:
my serlvet got this
<mvc:annotation-driven />
<mvc:resources mapping="/resources/**" location="/resources/" />
In my jsp file I did this:
<img src="<c:url value="/resources/logo.png" />"/>
I got resource folders with the logo.png file in the following places:
main->resources
main->webapp->resources
main->webapp->WEB-INF->resources
It still doesn't work
I also tried :
<mvc:resources mapping="/resources/**"
location="/, classpath:/WEB-INF/public-resources/"
cache-period="10000" />
and include the picture with
/resources/images/logo.png
and the picture located in
src/main/webapp/images/logo.png
doesnt't work for me
EDIT:
I guess it this:
<mvc:resources mapping="/resources/**" location="/resources/" />
got no effect to the program. I can always acces the url http://localhost:8080/test/resources/logo.png
doenst matter if I got this mvc line in my serlvet or not. If I change
<mvc:resources mapping="/resources/**" location="/resources/" />
to
<mvc:resources mapping="/resources1/**" location="/resources/" />
I can't acces to the file with http://localhost:8080/test/resources1/logo.png but with http://localhost:8080/test/resources/logo.png
Greets Sam
As an aside, while it is probably not best to make an Eclipse Dynamic Web Project and convert it to a Maven project through Eclipse, it will work, because Eclipse will put an entry into your POM that points to the WebContent directory. Have a look you will probably find it there. There is nothing wrong with making a Dynamic Web Project per se, but I typically change the initial directory configuration to match maven's expectations in the Wizard and convert to a maven project right away. Much easy to work on the POM than copy jars to the lib directory.
Otherwise, the resources directory you referring to should be in the root of your war file. The best way to get it there is to put resources at the root of your WebContent directory, not under WEB-INF. Try moving it there, open the .war file and inspect the contents to be sure it is in the root, and you should be good to go.
I have a spring boot (I use Thymeleaf for templating) project where I want to use some jQuery libraries.
Unfortunately, the webjars aren't loading at all. I have tried many configuration but all of them failed.
Here is the code snippet of my HTML page:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
<title>JAC</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.js"
th:src="#{/webjars/jquery/2.1.4/jquery.min.js}" type="text/javascript"></script>
<script src="http://cdn.jsdelivr.net/webjars/jquery-file-upload/9.10.1/jquery.fileupload.js" type="text/javascript"
th:src="#{/webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js}"></script>
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.5/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.5/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
<link href="http://cdn.jsdelivr.net/webjars/jquery-file-upload/9.10.1/jquery.fileupload.css"
rel="stylesheet" media="screen" />
</head>
I have added them in the pom file:
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>jquery</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.5</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery-file-upload</artifactId>
<version>9.10.1</version>
</dependency>
But when calling the page I got a 404 on jquery.min.js and jquery.fileupload.min.js.
GET http://localhost:8888/webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js
2015-09-21 02:02:04.059 home:9
GET http://localhost:8888/webjars/jquery/2.1.4/jquery.min.js 404 (Not Found)
You are referencing jquery library correctly. Maybe you are missing resource handler configuration.
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>
Or if you use JavaConfig
#Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("classpath:/META-INF/resources/webjars/");
}
}
Webjars documentation
If this will not work, please check if you have webjars on classpath (open your application JAR in 7Zip and check if webjars resources are inside it.)
After inspecting the webjar for jquery, I got this working by adding a "dist" subpath.
<script src="webjars/jquery/2.1.4/dist/jquery.min.js" type="text/javascript"></script>
Additional answer found on one blog:
When using Spring Framework version 4.2 or higher, it will
automatically detect the webjars-locator library on the classpath and
use it to automatically resolve the version of any WebJars assets.
In order to enable this feature, we’ll add the webjars-locator library
as a dependency of the application:
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator</artifactId>
<version>0.30</version>
</dependency>
In this case, we can reference the WebJars assets without using the
version; (...)
if you use servlet 3.x just add :
1- using java config :
#Configuration
#EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/webjars/**").addResourceLocations("/webjars/").resourceChain(false);
registry.setOrder(1);
}
}
2- or xml config :
<mvc:resources mapping="/webjars/**" location="/webjars/">
<mvc:resource-chain resource-cache="false" />
</mvc:resources>
The webjars dependencies should be available on the spring boot classpath, so you should try referencing the webjars using the src attribute like so:
<script src="webjars/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="webjars/jquery-file-upload/9.10.1/jquery.fileupload.min.js"></script>
<link href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"
rel="stylesheet" media="screen" />
<link href="webjars/jquery-file-upload/9.10.1/jquery.fileupload.css"
rel="stylesheet" media="screen" />
I ended up doing a mvn clean install (from cmd prompt) to get the target cleaned and all the lib/jars populated correctly. I am using Spring boot with Intelij.
After inspecting the webjars for jquery, I got this working by adding a "THE VERSION OF JQUERY LIBRARY USED IN POM.XML FILE"
<script src = "/webjars/jquery/3.1.0/jquery.min.js"></script>
(in my case I used 3.1.0 version, used that version only that you are using).
Make sure if you have updated the version of bootstrap or jquery when you are adding the dependencies, you should update the URL's in the jsp's or html's with the correct version of bootstrap and jquery.
This is my dispacter-servlet.xml file. When i deploy the project on resin pro 4.0.36 it loads my index page and the content BUT FAILS to load css files and images stored under the staticresources folder
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd">
<context:component-scan base-package="com.dogears" />
<bean id="viewResolver"
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/pages/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
<import resource="classpath:beans.xml"/>
<mvc:resources mapping="/resources/**" location="/staticresources/" />
<mvc:annotation-driven />
Please can anyone tell me how to mapp my static resources folder, so that whenever the request is of the patter /resources/* it redirects the request to the static resources folder. the staticresources folder is in MyspringProject/src/main/webapps directory.
I believe you need to map your staticresources directory as a root directory. In Eclipse that would be a "Source Folder" and in IntelliJ a "Resources Root".
Refer to the following help docs depending on your IDE:
Eclipse: http://help.eclipse.org/luna/index.jsp?topic=%2Forg.eclipse.jdt.doc.user%2Freference%2Fref-wizard-source-folder.htm
IntelliJ: https://www.jetbrains.com/webstorm/help/configuring-folders-within-a-content-root.html
Suppose your project directory structure is like
- src
- main
- webapp
- resources
- css
- abc.css
- images
- xyz.jpg
& your .html or .jsp pages are located in the directory as below
- webapp
- index.jsp
- pages
- welcome.jsp
then you can add link to your resources in index.jsp page with the URL BaseURL/index.jsp
<link href="resources/css/abc.css" rel="stylesheet" type="text/css" />
<body>
<img src="resources/images/xyz.jpg" alt="" style="width:100px;height:100px" />
</body>
& to welcome.jsp with URL BaseURL/pages/welcome.jsp as
<link href="../resources/css/abc.css" rel="stylesheet" type="text/css" />
<body>
<img src="../resources/images/xyz.jpg" alt="" style="width:100px;height:100px" />
</body>
Hope this helps you.
I finally found my solution. I had deployed my spring webapp in the webapps folder of the resin directory.
I realised that <mvc:resource /> mapping tag does not work when you have deployed your spring app on resin server instead of tomcat.
Hence i solved this by first creating a war file of my project and then extracted the war file on the desktop and later placed all the contents from the war file in the webapps/root (and not webapps folder) folder of resin directory. and then from my index page i used JSTL TAG to include the external stylesheet.
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<c:url value="/staticresources/externalcss.css"/>">
</head>
<body>
<h2 class="text_style">Hello World!</h2>
</body>
</html>
IT WORKS !!!
I am utilising the Bootstrap front end framework, although I am having some trouble getting the icons to load. I have implemented Spring security, I am not sure whether this may be affecting them not to load. I am calling my .css and .js files like this:
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/style/bootstrap.css" />
<script src="${pageContext.request.contextPath}/static/js/jquery.js"></script>
This is the configuration that I have in my Dispatcher servlet config:
<mvc:resources location="/resources/" mapping="/static/**" />
This is really irritating, can someone please help. Thanks
In your spring security config, have you excluded your resources directory containing your css, js, images from the secured zone ?
<http use-expressions="true" security="none" pattern="/resources/**">
</http>
If the problem is only related to the twitter bootstrap icons, have you included the files glyphicons-halflings.png glyphicons-halflingswhite.png in a resources/img folder ?
I am new to spring and am trying it.
I have a jsp file which includes css and images as follows
<link href="css/style.css" rel="stylesheet" type="text/css" />
Now i have a url path as /localhost/myapp/test/tst which is mapped to a controller which then forwards it to view jsp
view.jsp is present it
/web-inf/jsp/view.jsp
But when hit the path /localhost/myapp/test/tst the css and images path gets resolved to
/localhost/myapp/test/tst/css/style.css
Actaully i want it to come as /localhost/myapp/css/style.css
css and html are present in root of webapp
How i have following in my spring config
<mvc:annotation-driven />
<mvc:resources mapping="/images/**" location="/images/" />
<mvc:resources mapping="/css/**" location="/css/" />
Your CSS href is currently relative to your page, you need to make it relative to the server root by adding a leading slash (plus context, etc). Its also a good idea to add the contextPath so that if/when you change the webapp name or deploy it as a root webapp, the resources still work.
<link href="${pageContext.request.contextPath}/css/style.css" rel="stylesheet" type="text/css" />