文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Spring MVC CSS、字体、图像不会显示在index.html页面中

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

Stack Overflow用户
提问于 2017-04-13 13:24:32
回答 2查看 1.1K关注 0票数 0

我是spring框架的新手，我可以在本地主机上运行我的index.html，但是所有的资源都不会显示。下面是我的文件夹结构

代码语言：javascript
复制
- 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页面：

代码语言：javascript
复制
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，resoucres的映射已经存在：

代码语言：javascript
复制
<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/" />

我甚至补充道：

代码语言：javascript
复制
<resources mapping="/resources/css" location="/resources/css" />
<resources mapping="/resources/fonts" location="/resources/fonts" />
<resources mapping="/resources/images" location="/resources/images" />

但还是行不通。

编辑2：

当我转到chrome - inspect console时。这是日志：

代码语言：javascript
复制
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中的所有行都包含：

代码语言：javascript
复制
<link rel="stylesheet" href=

抛出错误。

我尝试将"href“更改为：

代码语言：javascript
复制
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/ace-skins.min.css" />

但是仍然是一样的，css，图片等不能加载。

java
html
css
spring
spring-mvc
EN

回答 2

Stack Overflow用户

发布于 2017-04-13 13:44:59

您需要在spring中向serve static content注册资源处理程序，您可以通过XML way将其注册为或

代码语言：javascript
复制
<mvc:resources mapping="/resources/**" location="/resources/" />

Java config

代码语言：javascript
复制
@Configuration
@EnableWebMvc
public class MvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry
          .addResourceHandler("/resources/**")
          .addResourceLocations("/resources/"); 
    }
}

您还可以将多个资源位置添加为

代码语言：javascript
复制
.addResourceLocations("/resources/","classpath:/other-resources/");

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

享受编码的乐趣！

票数 0
EN

Stack Overflow用户

发布于 2017-04-13 17:56:13

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

代码语言：javascript
复制
<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中

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/43384143

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档