can't find css, images and js static files in spring - spring

Question

my servlet-context.xml file
<?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/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
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<!-- DispatcherServlet Context: defines this servlet's request-processing
infrastructure -->
<context:component-scan base-package="com.aitrich.learnware.web" />
<!-- Enables the Spring MVC #Controller programming model -->
<mvc:annotation-driven />
<!-- Maps '/' requests to the 'home' view -->
<mvc:view-controller path="/" view-name="home" />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving
up static resources in the ${webappRoot}/resources directory -->
<mvc:resources mapping="/resources/css/**" location="/resources/css/" />
<mvc:resources mapping="/resources/js/libs/**" location="/resources/js/libs/" />
<mvc:resources mapping="/resources/img/**" location="/resources/img/" />
<!-- Internationalization support -->
<bean id="localeResolver"
class="org.springframework.web.servlet.i18n.SessionLocaleResolver">
<property name="defaultLocale" value="en_US" />
</bean>
<bean id="localeChangeInterceptor"
class="org.springframework.web.servlet.i18n.LocaleChangeInterceptor">
<property name="paramName" value="language" />
</bean>
<bean
class="org.springframework.web.servlet.mvc.support.ControllerClassNameHandlerMapping">
<property name="interceptors">
<list>
<ref bean="localeChangeInterceptor" />
</list>
</property>
</bean>
<bean id="messageSource"
class="org.springframework.context.support.ResourceBundleMessageSource">
<property name="basename" value="locale/messages" />
</bean>
<!-- **************************************************************** -->
<!-- THYMELEAF-SPECIFIC ARTIFACTS -->
<!-- TemplateResolver <- TemplateEngine <- ViewResolver -->
<!-- **************************************************************** -->
<bean id="templateResolver"
class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
<property name="prefix" value="/WEB-INF/views/" />
<property name="suffix" value=".html" />
<property name="templateMode" value="HTML5" />
</bean>
<bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine">
<property name="templateResolver" ref="templateResolver" />
<!-- These lines configure the dialects to use with Thymeleaf -->
<property name="dialects">
<set>
<bean class="org.thymeleaf.spring3.dialect.SpringStandardDialect" />
<bean class="nz.net.ultraq.web.thymeleaf.LayoutDialect" />
</set>
</property>
</bean>
<bean class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
<property name="templateEngine" ref="templateEngine" />
</bean>
</beans>
And i access the image using thymeleaf like
<img src="../../resources/img/cancel.png" th:attr="src=#{resources/img/cancel.png}, title=#{background}, alt=#{background}" />
But nothing is showing..!

Answer 1

If you have java project and your resources/img/** or resources/css/** folder comes under WebContent you can access the your resources like this
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/styleV.css"
type="text/css" />
and similar way for images and js file.
Or second approach is you can add following mapping in web.xml for your servlet.
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.css</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.png</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.jpg</url-pattern>
</servlet-mapping>
and access the css as
<link rel="stylesheet" type="text/css" href="resources/css/jquery-ui-1.8.22.custom.css">

Answer 2

Try add to web.xml
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.css</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.ico</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>default</servlet-name>
<url-pattern>*.png</url-pattern>
</servlet-mapping>
and my css/js/img located - webapp/js/, webapp/img/, webapp/css/

Answer 3

I just found on Linux that I have to remove the starting "/" in my resource mapping!
see here
<!-- NOTE the location does not have a starting /!!!! -->
<resources mapping="/resources/**" location="resources/" />
boy did this cause me a lot of frustration. All the examples have the / prefix for location. It works great now by calling c:url pattern example below:
<link rel="stylesheet"
href="<c:url value="/resources/css/coreStyle.css" />" type="text/css">