Question

在我的spring mvc web应用程序中，我的jsp页面加载时没有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

任何人都可以告诉我为什么jsp文件中的图像没有显示..

Answer 1

您使用的是img来源，例如

＆＃34;影像/ social03.png＆＃34;

和link href一样

＆＃34; CSS / default.css＆＃34;

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

＆＃34; /images/social03.png"

和

＆＃34; /css/default.css"

Answer 2

我想

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

尝试使用jstl标记库

Spring-css和图像文件未加载到jsp页面中

2 个答案: