Spring MVC CSS、字体、图像不会显示在 index.html 页面中答案

【问题标题】：Spring MVC CSS, fonts, images wont show in index.html pageSpring MVC CSS、字体、图像不会显示在 index.html 页面中
【发布时间】：2017-09-09 02:18:57
【问题描述】：

我是 Spring 框架的新手，我能够从本地主机运行我的 index.html，但所有资源都不会显示。下面是我的文件夹结构

- src/main
    - webapp
        - resources
            - css (All css files)
            - fonts (All font files)
            - images (All image files)
            - js (All js files)
        - static
            - index.html (my index.html)
        - WEB-INF

我的 index.html 页面：

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>My First Application</title>

    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="/resources/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/resources/font-awesome/4.5.0/css/font-awesome.min.css" />
    .........

在“href”中，我尝试多次更改目录路径，页面正在加载但只是一堆文本（没有 css、图像等）

我是否还需要更新我的 servlet-context.xml 或 web.xml？

编辑：

我检查了 servlet-context.xml 并且资源的映射已经存在：

<mvc:resources mapping="/static/**" location="/static/" />
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/" />

我什至补充说：

<resources mapping="/resources/css" location="/resources/css" />
<resources mapping="/resources/fonts" location="/resources/fonts" />
<resources mapping="/resources/images" location="/resources/images" />

但还是不行。

编辑 2：

当我去 chrome - 检查 - 控制台时。这是日志：

springmvc:13 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/font-awesome/4.5.0/css/font-awesome.min.css 
springmvc:21 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace.min.css 
springmvc:18 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/fonts.googleapis.com.css 
springmvc:26 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace-skins.min.css 
springmvc:27 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace-rtl.min.css 
springmvc:36 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/ace-extra.min.js 
springmvc:2149 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery-2.1.4.min.js 
springmvc:2159 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/bootstrap.min.js 
springmvc:2166 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery-ui.custom.min.js 
springmvc:2167 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.ui.touch-punch.min.js 
springmvc:2168 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.easypiechart.min.js 
springmvc:2169 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.sparkline.index.min.js 
springmvc:2170 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.flot.min.js 
springmvc:2171 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.flot.pie.min.js 
springmvc:2172 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.flot.resize.min.js 
springmvc:12 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/bootstrap.min.css 
springmvc:18 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/fonts.googleapis.com.css 
springmvc:13 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/font-awesome/4.5.0/css/font-awesome.min.css 
springmvc:21 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace.min.css 
springmvc:26 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace-skins.min.css 
springmvc:27 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/css/ace-rtl.min.css 
springmvc:36 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/ace-extra.min.js 
springmvc:2149 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery-2.1.4.min.js 
springmvc:2159 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/bootstrap.min.js 
springmvc:2166 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery-ui.custom.min.js 
springmvc:2167 GET http://localhost:8080/$%7BpageContext.request.contextPath%7D/resources/js/jquery.ui.touch-punch.min.js 
springmvc:2180 Uncaught ReferenceError: jQuery is not defined
at springmvc:2180

基本上，我的 html 中的所有行都有：

<link rel="stylesheet" href=

引发错误。

我尝试将“href”更改为：

<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/ace-skins.min.css" />

但还是一样，css、图片等不会加载。

【问题讨论】：

您是否添加了任何资源处理程序映射？请公开您的应用容器详细信息！
对不起，刚开始使用spring框架，你说的应用容器细节是什么意思？

标签： java html css spring spring-mvc

【解决方案1】：

你需要在spring中注册Resource Handler到serve static content你可以通过XML way注册为或

<mvc:resources mapping="/resources/**" location="/resources/" />

Java config

@Configuration
@EnableWebMvc
public class MvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
          .addResourceHandler("/resources/**")
          .addResourceLocations("/resources/"); 
    }
}

你也可以添加多个资源位置

.addResourceLocations("/resources/","classpath:/other-resources/");

使用逗号分隔字符串，您可以提供任意数量的资源位置！

享受编码！

【讨论】：

我签入了 xml 并且映射已经存在。问题已更新。
不确定你的意思，但我在网络“" = "加载资源失败：服务器响应状态为 404 (Not Found)"
如果可能的话，请用整个 html 更新您的问题，或者像上面的一些有趣的部分！我想知道您在tomcat上部署的应用程序路径！谢谢

【解决方案2】：

尝试使用如下的相对链接。也使用 Thymeleaf 的 th:href

<link rel="s`tylesheet" type="text/css" media="all" 
href="../../../resources/css/styles.css"` 
th:href="@{/resources/css/styles.css}" />

查看您部署的目录结构并确保所需文件存在于所述文件夹（资源）中

记得把相对路径../../改成正确的级别。

如果文件未复制到 /resources 文件夹，则尝试将它们放入 /main/src/webapp/resources

【讨论】：