2017-04-09 49 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標籤庫