spring mvc where to put css/js/img files

Question

0 and have problem where to put public files I tried Where to place images/CSS in spring-mvc app? this soluion but its not working for me

I have tried to place my public folder every where in WEB-INF directory outside but still nothing

web.xml

    <?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="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">

  <display-name>s-mvc</display-name>
  <servlet>
    <servlet-name>frontController</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

  <mvc:resources mapping="/css/**" location="/css/"/>

</web-app>

frontcontroller-servlet.xml

<mvc:annotation-driven/>

    <context:component-scan base-package="pl.skowronline.controller" />

    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/views/"/>
        <property name="suffix" value=".jsp"/>
    </bean>

and that how I call css file <link type="text/css" href="/css/bootstrap.css" rel="stylesheet" />

Answer 1

I think you are getting confused with the web.xml and the application-context.xml.

The web.xml should contain the webapp xsd declarations like this, and the mapping for the Dispatcher Servlet.

 <?xml version="1.0" encoding="UTF-8"?>
 <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <display-name>s-mvc</display-name>
  <servlet>
    <servlet-name>frontController</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>
 </web-app>

Where as the application-context.xml contains the spring-framework xsd declarations like below

<?xml version="1.0" encoding="UTF-8"?>
 <beans xmlns="http://www.springframework.org/schema/beans"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xmlns:mvc="http://www.springframework.org/schema/mvc"
     xmlns:context="http://www.springframework.org/schema/context"
     xsi:schemaLocation="http://www.springframework.org/schema/mvc  http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
     http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd">

 <mvc:resources mapping="/css/**" location="/css/"/>
 <mvc:annotation-driven />
 <context:component-scan base-package="pl.skowronline.controller" />

 <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="prefix" value="/WEB-INF/views/"/>
    <property name="suffix" value=".jsp"/>
 </bean>

</beans>

Answer 2

the answer from JB Nizet is correct. However, it seems the problem of your application is more than just a place to put css/js file. For Spring MVC, you must put all configuration right, or it will not work.

For simplicity, just put the css folder right in the WEB-INF folder (/WEB-INF/css), so that you can access it like this in your page:

<a href="<c:url value='/css/bootstrap.css'/>"

That link should take you directly to the css file. If it works, you can change the <a> tag into the <link> tag for CSS styling.

If it doesn't work, there are a few things to check:

1) Spring Security constraints that forbid you to access the files

2) The affect of various filters/ interceptors that can hinder your file access

3) Servlet Configuration in web.xml. Make sure that no dispatcher intercept your access to the CSS file.

Often, <mvc:resources> will do all the above things for you. But just in case it failed, you may want to have a look.

For the <mvc:resources> error:

The matching wildcard is strict, but no declaration can be found for element 'mvc:resources'.

It looks like you haven't declared the right schema yet. For example, you should add the following lines in the beginning of your file:

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

UPDATE:

As your response, the problem seems to be here:

<servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

You should change it to:

<servlet-mapping>
    <servlet-name>frontController</servlet-name>
    <url-pattern>/*.html</url-pattern>
  </servlet-mapping>

This will save the URL for the css/images files from conflicting with the URL mapping of controller (your servlet), and it let mvc:resources do it magic. Of course, you can use what ever extension you want for "html" part. For a beautiful URL, we may use a library like Turkey URL rewrite to solve the problem

Answer 3

This is described in the following section of the documentation. Follow the instructions given there, and then change your href: /css/bootstrap.css means: In the folder css right under the root of the server. So, unless your application is deployed as the root application, it won't work, because you need to prepend the context path of your app:

href="<c:url value='/css/bootstrap.css'/>"

And this will thus mean: in the css folder, right under the root of the webapp. If the context path of your webapp is /myFirstWebApp, the generated href will thus be

href="/myFirstWebApp/css/bootstrap.css"

Answer 4

You can try using context path to locate resource files.

<link type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" />

Read this to know more.

Answer 5

I too had the same problem.Please perform below steps to get it work which worked well for me and my teammates as well.

Step1 :- Create a folder in Web-INF with name "resources"

Step2 :- Upload your bootstrap,css and js if you already do have or in case if you want to write it write inside this folder

Step3 :- Now Update your dispatcher servlet xml as below

1. Add Below code within beans tag

   <mvc:resources mapping="/resources/**" location="/resources/" />
           <mvc:annotation-driven />
   

   2. Add below code to xsi:schemaLocation at top of this xml

      http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">

step 4:- now you can use css,bootstrap resouces in your code as below

<header class="custem_header_bg"><img src="resources/img/product_banner.png" class="img-responsive"> </header>

Answer 6

You can only set base on JSP as following steps. Then you don't need to set mvc:resources in web.xml. Just set base as following. Also we can use header file to set this value. Then we can include that header.jsp in to any page we are using in application. Then we dont need to set this value in every JSP.

You need to set <base/> as following...

<c:set var="req" value="${pageContext.request}" />

<c:set var="url"> ${req.requestURL} </c:set>
<c:set var="uri" value="${req.requestURI}" />

<head>
    <title></title>
    <base href="${fn:substring(url, 0, fn:length(url) - fn:length(uri))}${req.contextPath}/" />

Then You can Import any JS or CSS like below..

<script src="assets/js/angular/angular.js"></script>