图像在spring mvc jsp文件中

时间:2017-01-22 07:00:38

标签: spring jsp spring-mvc

我一直在学习并尝试使用Spring MVC来开发Web应用程序。我试图在我的jsp文件中使用来自/ WebContent / resources / images的图像。虽然我可以使用(c:url)格式在我的jsp文件中成功使用图像,但我似乎找不到在我的css文件中使用这些图像的方法。我尝试了几条路径,但似乎都没有.`

    <beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc= "http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
    http://www.springframework.org/schema/beans     
    http://www.springframework.org/schema/beans/spring-beans.xsd
    http://www.springframework.org/schema/context 
    http://www.springframework.org/schema/context/spring-context.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc.xsd">

<mvc:annotation-driven />
  <bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping" />
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter" />
  <mvc:resources mapping="/resources/**" location="resources/"> </mvc:resources>

下面的JSP文件:

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Auto-Info</title>
<link  rel="stylesheet" href="<c:url value="/resources/css/auto.css" />">
</head>
<body>
   <div class="contain">
   <header>
   <h1><a href="#">AUTO INFO</a></h1>
   </header>
   <nav>
  <ul> 
  <li><a href="" target="_self">HOME</a></li>
  <li><a href="login" target="_self">LOGIN</a></li>
  <li><a href="register" target="_self">REGISTER</a></li>
  </ul>
   </nav>
     <div class="carsec">
    <form action="" method="get">
    <input list="Make" name="Make">
        <datalist id="Make" name="Make" class="displist">
        <option value="Ford"> Ford</option> 
           <option value="Chevrolet"> Chevrolet</option> 
            <option value="Kia">Kia</option> 
            <option value="Maserati">Maserati</option> 
            <option value="Nissan"> Nissan</option> 
            <option value="Honda">Honda</option> 
            <option value="Tesla">Tesla</option> 
            <option value="Toyota">Toyota</option> 
              <option value="Subaru">Subaru</option> 
              <option value="Volkswagen">Volkswagen</option> 
              <option value="Hyundai">Hyundai</option> 
        </datalist>
         <input list="Year">
        <datalist id="Year" name="Year" class="displist">
           <option value="2005"> 2005</option> 
            <option value="2007">2007</option> 
            <option value="2009"> 2009</option> 
            <option value="2010">2010</option> 
               <option value="2011">2011</option> 
            <option value="2012">2012</option> 
            <option value="2013">2013</option> 
            <option value="2014">2014</option> 
            <option value="2015">2015</option> 
            <option value="2016">2016</option> 

        </datalist>
         </form>

    </div>
     <img alt="auto" src="<c:url value="/resources/imgs/Optimized-maxresdefault.jpg" />" style="width:400px; height:250px;" >
   <div class="tables">
    <table> 
        <tr>
        <th> <b>Make </b></th>
        <th> <b>Model</b> </th>
        <th> <b>VIN </b></th>
        <th> <b>Year</b> </th>
        </tr>
         <c:forEach items="${vehicles}" var="vehicle">
        <tr>
            <td>${vehicle.make}</td>
            <td>${vehicle.model}</td>
            <td>${vehicle.VIN}</td>
        <td>${vehicle.year}</td>
        </tr>
    </c:forEach>
    </table>
    </div>
    </div>
</body>
</html>

找到解决方案:

    background: url("http://localhost:8080/SpringMysql/resources/imgs/Optimized-maxresdefault.jpg"):

     background: url("/SpringMysql/resources/imgs/Optimized-maxresdefault.jpg")

他们两个都很好。第二种选择可能是正确的选择。 P.s:SpringMysql是我的项目的名称,我不得不从文件路径中删除/ WebContent /以使其工作。

1 个答案:

答案 0 :(得分:0)

在您的dispatcher-servlet地图中,您的资源网址如下:

<mvc:resources mapping="/resources/**" location="/WEB-INF/resources/**"> </mvc:resources>

在你的jsp页面中,img源就像

<img alt="auto" src="<c:url value='/resources/imgs/Optimized-maxresdefault.jpg' />" style="width:400px; height:250px;" >

让我知道状态。

<强>更新 假设您的css文件夹和图像文件夹位于资源文件夹中。

resources
   |_ images
   |_ css

要从css文件访问图像,您可以使用这样的相对路径:

background-image: url(../images/your_image_file_name.jpg);