External CSS does not load in web page

2020-07-26 06:08发布

问题:

I am developing a web application using Spring and Tomcat 7.0. When I test the page in a browser it does not apply the CSS because it is unable to load the external stylesheet.

Here are my various files

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>MyProject</display-name>
  <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet>
    <servlet-name>ResourceServlet</servlet-name>
    <servlet-class>org.springframework.js.resource.ResourceServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
    </servlet>


    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.htm</url-pattern>
    </servlet-mapping>    
    <servlet-mapping>
    <servlet-name>ResourceServlet</servlet-name>
    <url-pattern>/resources/*</url-pattern>
</servlet-mapping>

    <welcome-file-list>
        <welcome-file>redirect.jsp</welcome-file>
    </welcome-file-list>
</web-app>

dispatcher-servlet.xml

<?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:p="http://www.springframework.org/schema/p"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
 http://www.springframework.org/schema/beans/spring-beans-2.5.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">

    <bean id="viewResolver"
        class="org.springframework.web.servlet.view.InternalResourceViewResolver"
        p:prefix="/WEB-INF/jsp/" p:suffix=".jsp" />

    <bean id="userService" class="com.abdus.service.UserServiceImpl" />

    <context:component-scan base-package="com.abdus.web" />
    <bean
        class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
    <bean
        class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />

</beans>

and this is the head from jsp page

welcomePage.jsp

   <meta charset="utf-8"/>
   <title>Welcome</title>
   <link rel="stylesheet" href="/resources/dream.css" type="text/css" />

回答1:

You're saying the css url is not accessible (as opposed to it not being applied to your jsp) right? What's the response when you browse to /resources/dream.css?

I have had issues before with tomcat not serving static content with a /* servlet mapping. The way I solved it was to explicitly map each content type in web.xml, including .css files, like so:

<servlet-mapping>
  <servlet-name>default</servlet-name>
  <url-pattern>*.css</url-pattern>
</servlet-mapping>

(where the "default" servlet is predefined by tomcat in conf/web.xml as org.apache.catalina.servlets.DefaultServlet)



回答2:

It was actually a path issue. This was my directory structure

MyProject/WEB-INF/resources/dream.css and in jsp link i had given it as href="/resources/dream.css" and i even tried href="MyProject/resources/dream.css".

But the wasy i resolved it is I made directory structure as MyProject/resources/dream.css and href="MyProject/resources/dream.css"



回答3:

You could use jstl tags:

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link href="<c:url value="/resources/style.css"/>" rel="stylesheet" type="text/css" />

Or you could use full resources path:

<base href="http://localhost:8080/myapp/" />
<link href="resources/style.css" rel="stylesheet" type="text/css" />