2017-04-09 50 views
1

在我的spring mvc web应用程序中,我的jsp页面加载时没有css和图像,尽管我已经在jsp文件中指定了正确的位置。有什么我需要添加?spring-css和图像文件没有加载到jsp页面

这是我的JSP页面中...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Briefcase by TEMPLATED</title> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.slidertron-1.1.js"></script> 

<link href="css/default.css" rel="stylesheet" type="text/css" media="all" /> 

</head> 
<body> 
<div id="header" class="container"> 
    <div id="logo"> 
     <h1><a href="#">BriefCase</a></h1> 
    </div> 
    <div id="menu"> 
     <ul> 
      <li class="active"><a href="#" accesskey="1" title="">Homepage</a></li> 
      <li><a href="#" accesskey="2" title="">My Designs</a></li> 
      <li><a href="#" accesskey="3" title="">About Me</a></li> 
      <li><a href="#" accesskey="4" title="">Contact</a></li> 
     </ul> 
    </div> 
</div> 
<div id="banner" class="container"> 
    <div id="slider"> 
     <div class="viewer"> 
      <div class="reel"> 
       <div class="slide"> <a class="link" href="#">Full story ...</a> <img src="images/pic01.jpg" alt="" /> </div> 
       <div class="slide"> <a class="link" href="#">Full story ...</a> <img src="images/pic02.jpg" alt="" /> </div> 
       <div class="slide"> <a class="link" href="#">Full story ...</a> <img src="images/pic04.jpg" alt="" /> </div> 
       <div class="slide"> <a class="link" href="#">Full story ...</a> <img src="images/pic05.jpg" alt="" /> </div> 
      </div> 
     </div> 
     <div class="indicator"> 
      <ul> 
       <li class="active">1</li> 
       <li>2</li> 
       <li>3</li> 
       <li>4</li> 
      </ul> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $('#slider').slidertron({ 
      viewerSelector: '.viewer', 
      reelSelector: '.viewer .reel', 
      slidesSelector: '.viewer .reel .slide', 
      advanceDelay: 3000, 
      speed: 'slow', 
      navPreviousSelector: '.previous-button', 
      navNextSelector: '.next-button', 
      indicatorSelector: '.indicator ul li', 
      slideLinkSelector: '.link' 
     }); 
    </script> 
</div> 
<div id="page" class="container"> 
    <div id="content"> 
     <div id="onecolumn"> 
      <h2>Welcome to out website!</h2> 
      <p>This is BriefCase , a free, fully standards-compliant CSS template designed by TEMPLATED. The photo used in this template is from Fotogrph. This free template is released under the Creative Commons Attribution license, so you’re pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :)</p> 
     </div> 
     <div id="two-column"> 
      <div class="box-content"> 
       <h2 class="title title01">Nulla luctus eleifend</h2> 
       <p>Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque quis.</p> 
      </div> 
      <div class="box-content"> 
       <h2 class="title title02">Maecenas luctus lectus</h2> 
       <p>Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat vel, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet. In posuere odio quisque semper augue mattis maecenas ligula.</p> 
      </div> 
     </div> 
    </div> 
    <div id="sidebar"> 
     <div id="sbox1"> 
      <h2>Fusce fringilla</h2> 
      <ul class="list-style1"> 
       <li class="first"> 
        <p>Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus, cursus egestas at sem. </p> 
        <p><a href="#" class="link-style">Read More</a></p> 
       </li> 
       <li> 
        <p>Etiam non felis. Donec ut ante. In id eros. Suspendisse lacus turpis, cursus at sem. </p> 
        <p><a href="#" class="link-style">Read More</a></p> 
       </li> 
      </ul> 
     </div> 
     <div id="sbox2"> 
      <h2>Testimonials</h2> 
      <p class="testimonial">Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.</p> 
      <div class="author"><img src="<c:url value="/resources/images/pic03.jpg" />" width="80" height="80" alt="" /><span class="name">Juan Dela Cruz</span><span class="position">Company CEO</span><span>MyCompany, LLC</span></div> 
     </div> 
    </div> 
</div> 
<div id="footer" class="container"> 
    <div id="fbox1"> 
     <h2>Aenean elementum</h2> 
     <ul class="style1"> 
      <li class="first"><a href="#">Consectetuer adipiscing elit</a></li> 
      <li><a href="#">Metus aliquam pellentesque</a></li> 
      <li><a href="#">Suspendisse iaculis mauris</a></li> 
      <li><a href="#">Urnanet non molestie semper</a></li> 
      <li><a href="#">Proin gravida orci porttitor</a></li> 
     </ul> 
    </div> 
    <div id="fbox2"> 
     <h2>Vestibulum luctus</h2> 
     <ul class="style1"> 
      <li class="first"><a href="#">Consectetuer adipiscing elit</a></li> 
      <li><a href="#">Metus aliquam pellentesque</a></li> 
      <li><a href="#">Suspendisse iaculis mauris</a></li> 
      <li><a href="#">Urnanet non molestie semper</a></li> 
      <li><a href="#">Proin gravida orci porttitor</a></li> 
     </ul> 
    </div> 
    <div id="fbox3"> 
     <h2>Etiam malesuada</h2> 
     <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Donec leo. Vivamus fermentum nibh in augue.</p> 
     <ul class="style2"> 
      <li><a href="#"><img src="images/social03.png" width="32" height="32" alt="" /></a></li> 
      <li><a href="#"><img src="images/social01.png" width="32" height="32" alt="" /></a></li> 
      <li><a href="#"><img src="images/social04.png" width="32" height="32" alt="" /></a></li> 
      <li><a href="#"><img src="images/social02.png" width="32" height="32" alt="" /></a></li> 
     </ul> 
    </div> 
</div> 
<div id="copyright" class="container"> 
    <p>&copy; Untitled. All rights reserved. Design by <a href="http://templated.co" rel="nofollow">TEMPLATED</a>. Photos by <a href="http://fotogrph.com/">Fotogrph</a>.</p> 
</div> 
</body> 
</html> 

这是springweb.xml

<beans xmlns="http://www.springframework.org/schema/beans" 
    xmlns:context="http://www.springframework.org/schema/context" 
    xmlns:mvc="http://www.springframework.org/schema/mvc" 
    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.xsd 
    http://www.springframework.org/schema/context 
    http://www.springframework.org/schema/context/spring-context-3.0.xsd"> 

    <context:component-scan base-package="com.spring.login.action" /> 

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

    <!-- <import resource="springBeanConfiguration.xml"/> --> 
    <mvc:resources mapping="/resources/**" location="/resources/theme1/" 
     cache-period="31556926" /> 


</beans> 

这是我的文件夹结构

Folder Structure

人Tellme公司whythe jsp文件中的图像未显示..

+1

,你能告诉我们一些代码,你已经写了?所以我们可以了解你在做什么 – anurupr

+0

你使用的是相对位置? –

+0

我已在此附上相关文件。请帮我 –

回答

0

您正在使用img来源,如

“图像/ social03.png”

linkhref

“的css/default.css”

这些路径是相对的他们正在搜索当前文件夹中的给定文件。由于很可能您的页面不在根文件夹内,并且您希望使用相对于根文件夹的位置,因此您需要确保路径与根文件夹相关,如

“ /images/social03.png”

“/css/default.css”

+0

When I add the below lines.. ..我得到了一个404错误,而没有这个我得到的页面imgaes未加载。 –

+0

您应该保持mvc:资源原样。只需修改您的img标签的来源和链接的href即可。 –

0

我认为

<c:url value="/css/default.cs" var="style"> 
<link href="${style}" rel="stylesheet" type="text/css" media="all" /> 

尝试这种利用JSTL标签库