为什么图片的网址在css中不起作用？

时间：2016-06-27 21:40:26

标签： html css image jsp url

我花了一整天的时间来讨论这个问题并且谷歌得到很多答案。

我的login.css文件位于：

WebContent/resources/css/login.css

我的图片文件位于：

WebContent/resources/img/pencil.jpg

当我尝试通过此CSS将图像添加到身体的背景时：

body{
    background-image:url("../img/pencil.jpg") center center no-repeat;
}

它不起作用！  另外，我尝试了另一种方法：我试图直接将另一个图像添加到我的JSP页面而不通过CSS。 我的JSP位于：

  WebContent/WEB-INF/views/login.jpg

我的图片位于：

 WebContent/resources/img/calendar.png

JSP中的代码是：

<img src="../../resources/img/calendar.png"/>

他们都失败了！其他的工作正常，只是图像失败！我不知道为什么。

这是控制台：

[27 17:48:25,515 DEBUG] [http-nio-8080-exec-2] servlet.DispatcherServlet - DispatcherServlet with name 'todo' processing GET request for [/ToDoList/login]
[27 17:48:25,527 DEBUG] [http-nio-8080-exec-2] annotation.RequestMappingHandlerMapping - Looking up handler method for path /login
[27 17:48:25,535 DEBUG] [http-nio-8080-exec-2] annotation.RequestMappingHandlerMapping - Returning handler method [public org.springframework.web.servlet.ModelAndView code.controller.LoginController.showLoginPage()]
[27 17:48:25,535 DEBUG] [http-nio-8080-exec-2] support.DefaultListableBeanFactory - Returning cached instance of singleton bean 'loginController'
[27 17:48:25,538 DEBUG] [http-nio-8080-exec-2] servlet.DispatcherServlet - Last-Modified value for [/ToDoList/login] is: -1
[27 17:48:25,614 DEBUG] [http-nio-8080-exec-2] support.DefaultListableBeanFactory - Invoking afterPropertiesSet() on bean with name 'login'
[27 17:48:25,615 DEBUG] [http-nio-8080-exec-2] servlet.DispatcherServlet - Rendering view [org.springframework.web.servlet.view.JstlView: name 'login'; URL [/WEB-INF/views/login.jsp]] in DispatcherServlet with name 'todo'
[27 17:48:25,615 DEBUG] [http-nio-8080-exec-2] view.JstlView - Added model object 'firstuser' of type [code.model.FirstUser] to request in view with name 'login'
[27 17:48:25,615 DEBUG] [http-nio-8080-exec-2] view.JstlView - Added model object 'org.springframework.validation.BindingResult.firstuser' of type [org.springframework.validation.BeanPropertyBindingResult] to request in view with name 'login'
[27 17:48:25,625 DEBUG] [http-nio-8080-exec-2] view.JstlView - Forwarding to resource [/WEB-INF/views/login.jsp] in InternalResourceView 'login'
[27 17:48:25,799 DEBUG] [http-nio-8080-exec-2] beans.BeanUtils - No property editor [java.lang.StringEditor] found for type java.lang.String according to 'Editor' suffix convention
[27 17:48:25,812 DEBUG] [http-nio-8080-exec-2] servlet.DispatcherServlet - Successfully completed request
[27 17:48:26,232 DEBUG] [http-nio-8080-exec-3] servlet.DispatcherServlet - DispatcherServlet with name 'todo' processing GET request for [/ToDoList/resources/css/login.css]
[27 17:48:26,232 DEBUG] [http-nio-8080-exec-4] servlet.DispatcherServlet - DispatcherServlet with name 'todo' processing GET request for [/ToDoList/resources/js/login.js]
[27 17:48:26,232 DEBUG] [http-nio-8080-exec-5] servlet.DispatcherServlet - DispatcherServlet with name 'todo' processing GET request for [/ToDoList/resources/library/jquery-3.0.0.min.js]
[27 17:48:26,232 DEBUG] [http-nio-8080-exec-3] annotation.RequestMappingHandlerMapping - Looking up handler method for path /resources/css/login.css
[27 17:48:26,233 DEBUG] [http-nio-8080-exec-5] annotation.RequestMappingHandlerMapping - Looking up handler method for path /resources/library/jquery-3.0.0.min.js
[27 17:48:26,232 DEBUG] [http-nio-8080-exec-4] annotation.RequestMappingHandlerMapping - Looking up handler method for path /resources/js/login.js
[27 17:48:26,233 DEBUG] [http-nio-8080-exec-6] servlet.DispatcherServlet - DispatcherServlet with name 'todo' processing GET request for [/ToDoList/resources/library/jquery-ui-1.11.4.custom/jquery-ui.min.js]
[27 17:48:26,234 DEBUG] [http-nio-8080-exec-6] annotation.RequestMappingHandlerMapping - Looking up handler method for path /resources/library/jquery-ui-1.11.4.custom/jquery-ui.min.js
[27 17:48:26,235 DEBUG] [http-nio-8080-exec-5] annotation.RequestMappingHandlerMapping - Did not find handler method for [/resources/library/jquery-3.0.0.min.js]
[27 17:48:26,235 DEBUG] [http-nio-8080-exec-3] annotation.RequestMappingHandlerMapping - Did not find handler method for [/resources/css/login.css]
[27 17:48:26,237 DEBUG] [http-nio-8080-exec-3] handler.SimpleUrlHandlerMapping - Matching patterns for request [/resources/css/login.css] are [/resources/**]
[27 17:48:26,235 DEBUG] [http-nio-8080-exec-4] annotation.RequestMappingHandlerMapping - Did not find handler method for [/resources/js/login.js]
[27 17:48:26,237 DEBUG] [http-nio-8080-exec-6] annotation.RequestMappingHandlerMapping - Did not find handler method for [/resources/library/jquery-ui-1.11.4.custom/jquery-ui.min.js]
[27 17:48:26,243 DEBUG] [http-nio-8080-exec-4] handler.SimpleUrlHandlerMapping - Matching patterns for request [/resources/js/login.js] are [/resources/**]
[27 17:48:26,236 DEBUG] [http-nio-8080-exec-5] handler.SimpleUrlHandlerMapping - Matching patterns for request [/resources/library/jquery-3.0.0.min.js] are [/resources/**]
[27 17:48:26,243 DEBUG] [http-nio-8080-exec-6] handler.SimpleUrlHandlerMapping - Matching patterns for request [/resources/library/jquery-ui-1.11.4.custom/jquery-ui.min.js] are [/resources/**]
[27 17:48:26,247 DEBUG] [http-nio-8080-exec-4] handler.SimpleUrlHandlerMapping - URI Template variables for request [/resources/js/login.js] are {}
[27 17:48:26,247 DEBUG] [http-nio-8080-exec-3] handler.SimpleUrlHandlerMapping - URI Template variables for request [/resources/css/login.css] are {}
[27 17:48:26,247 DEBUG] [http-nio-8080-exec-6] handler.SimpleUrlHandlerMapping - URI Template variables for request [/resources/library/jquery-ui-1.11.4.custom/jquery-ui.min.js] are {}
[27 17:48:26,247 DEBUG] [http-nio-8080-exec-5] handler.SimpleUrlHandlerMapping - URI Template variables for request [/resources/library/jquery-3.0.0.min.js] are {}
[27 17:48:26,253 DEBUG] [http-nio-8080-exec-5] handler.SimpleUrlHandlerMapping - Mapping [/resources/library/jquery-3.0.0.min.js] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/resources/]], resolvers=[org.springframework.web.servlet.resource.PathResourceResolver@6f2e3841]]] and 1 interceptor
[27 17:48:26,253 DEBUG] [http-nio-8080-exec-4] handler.SimpleUrlHandlerMapping - Mapping [/resources/js/login.js] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/resources/]], resolvers=[org.springframework.web.servlet.resource.PathResourceResolver@6f2e3841]]] and 1 interceptor
[27 17:48:26,253 DEBUG] [http-nio-8080-exec-3] handler.SimpleUrlHandlerMapping - Mapping [/resources/css/login.css] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/resources/]], resolvers=[org.springframework.web.servlet.resource.PathResourceResolver@6f2e3841]]] and 1 interceptor
[27 17:48:26,253 DEBUG] [http-nio-8080-exec-6] handler.SimpleUrlHandlerMapping - Mapping [/resources/library/jquery-ui-1.11.4.custom/jquery-ui.min.js] to HandlerExecutionChain with handler [ResourceHttpRequestHandler [locations=[ServletContext resource [/resources/]], resolvers=[org.springframework.web.servlet.resource.PathResourceResolver@6f2e3841]]] and 1 interceptor
[27 17:48:26,255 DEBUG] [http-nio-8080-exec-5] servlet.DispatcherServlet - Last-Modified value for [/ToDoList/resources/library/jquery-3.0.0.min.js] is: -1
[27 17:48:26,255 DEBUG] [http-nio-8080-exec-4] servlet.DispatcherServlet - Last-Modified value for [/ToDoList/resources/js/login.js] is: -1
[27 17:48:26,255 DEBUG] [http-nio-8080-exec-3] servlet.DispatcherServlet - Last-Modified value for [/ToDoList/resources/css/login.css] is: -1
[27 17:48:26,255 DEBUG] [http-nio-8080-exec-6] servlet.DispatcherServlet - Last-Modified value for [/ToDoList/resources/library/jquery-ui-1.11.4.custom/jquery-ui.min.js] is: -1
[27 17:48:26,263 DEBUG] [http-nio-8080-exec-6] servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'todo': assuming HandlerAdapter completed request handling
[27 17:48:26,264 DEBUG] [http-nio-8080-exec-6] servlet.DispatcherServlet - Successfully completed request
[27 17:48:26,265 DEBUG] [http-nio-8080-exec-4] servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'todo': assuming HandlerAdapter completed request handling
[27 17:48:26,266 DEBUG] [http-nio-8080-exec-4] servlet.DispatcherServlet - Successfully completed request
[27 17:48:26,270 DEBUG] [http-nio-8080-exec-5] servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'todo': assuming HandlerAdapter completed request handling
[27 17:48:26,270 DEBUG] [http-nio-8080-exec-5] servlet.DispatcherServlet - Successfully completed request
[27 17:48:26,274 DEBUG] [http-nio-8080-exec-3] servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'todo': assuming HandlerAdapter completed request handling
[27 17:48:26,274 DEBUG] [http-nio-8080-exec-3] servlet.DispatcherServlet - Successfully completed request

2 个答案:

答案 0 :(得分：0)

在jsp上导入c标签：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

更改jsp上的代码，如下所示：

<img src="<c:url value="/resources/img/calendar.png"/>"/>

答案 1 :(得分：0)

经过一天的研究，我和不同的朋友一起解决了这个问题。救命！谢谢！

  1. 首先

    如果您像我一样使用Spring MVC，您应该看到这一部分。在Spring MVC项目中，我尝试将CS​​S和JS添加到JSP中。我将所有JSP放入名为＆＃34; views＆＃34;的文件中。在WEB-INF中。我创建了一个名为＆＃34; resources＆＃34;在WebContent下，与WEB-INF相同。在＆＃34;资源＆＃34;中，所有图像都在＆＃34; img＆＃34;文件，＆＃34; css＆＃34;中的CSS和JS也是如此。和＆＃34; js＆＃34;。在spring-servlet.xml文件中（不是web.xml文件，也许你有不同的文件名），添加：<mvc:resources mapping="/resources/**" location="/resources/"/>，这有助于查找资源文件。在要包含CSS和JS的JSP页面中添加： <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/login.css"/> <script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/login.js"></script>

    2. 然后，您可以成功地将JSP与CSS和JS链接起来。或者您可以使用其他标签来执行此操作。

    1. 其次

      下一部分是将图像添加到JSP页面，您可以通过两种方式完成。 首先，通过JSP添加图像：

      <img src="<%=request.getContextPath()%>/resources/img/calendar.png"/>

      其次，通过CSS添加图像：最好使用相对路径。 （相对路径相对于CSS文件的位置而不是JSP文件）

      • ./表示当前目录

      • ../表示父目录

      • /表示根目录

      • ../../表示移回两个目录并从那里开始

      2. 所以在我的情况下，我应该写

      `background-image: url("../img/pencil.jpg");`

      我犯的另一个错误是：我永远不应该添加＆＃34; no-repeat＆＃34;在背景图像的背面。

相关问题
最新问题