为什么图像的 URL 在 css 中不起作用？答案

【问题标题】：Why the URL of image does not work in the css?为什么图像的 URL 在 css 中不起作用？
【发布时间】：2016-10-30 01:01:43
【问题描述】：

我花了一整天的时间在这个问题上，并在谷歌上搜索了很多答案。

我的 login.css 文件位于：

WebContent/resources/css/login.css

我的图片文件所在位置：

WebContent/resources/img/pencil.jpg

当我尝试通过这个 CSS 将图像添加到正文的背景时：

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

它不起作用！另外，我尝试了另一种方法：我尝试不通过 CSS 直接将另一个图像添加到我的 JSP 页面。我的 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

【问题讨论】：

你能发布控制台错误吗？
有时，如果扩展名是 JPG 或 PNG，如果您编写 jpg 或 png，则会遇到问题。仔细检查扩展，如果它不能解决问题，然后像安德鲁所说的那样发布控制台错误
可能值得检查一下，您可以通过键入图像的完整 URL 直接在浏览器中加载图像。如果未加载，请检查图像文件和包含目录的文件权限和所有权。
@JohnSheridan 我可以使用浏览器上的完整 URL 成功加载图像。
@AndrewRibeiro 我更新了它。但是我在控制台信息中没有看到任何关于图像的错误警告。

标签： html css image jsp url

【解决方案1】：

在你的jsp上导入c标签：

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

修改你的jsp代码如下：

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

【讨论】：

谢谢！我很确定有很多方法可以在 JSP 中添加图像。昨天我也看到了一个使用spring标签的方法。

【解决方案2】：

经过一天的研究，我在不同朋友的帮助下弄清楚了！谢谢！

首先

如果你和我一样使用 Spring MVC，你应该看到这部分。在 Spring MVC 项目中，我尝试将 CSS 和 JS 添加到 JSP 中。我将所有 JSP 放入 WEB-INF 中名为“views”的文件中。我在 WebContent 下创建了一个名为“resources”的文件，与 WEB-INF 处于同一级别。在“资源”中，所有图像都在“img”文件下，“css”和“js”中的CSS和JS也是如此。在 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>

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

其次

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

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

其次，通过CSS添加图片：最好使用相对路径。（相对路径是相对于 CSS 文件而不是 JSP 文件的位置）
- ./ 表示当前目录
- ../ 表示父目录
- /表示根目录
- ../../ 表示向后移动两个目录并从那里开始

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

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

我犯的另一个错误是：我不应该在背景图像的后面添加“不重复”。

【讨论】：