关于SpringBoot无法访问CSS样式

最新推荐文章于 2025-04-09 22:50:01 发布

原创最新推荐文章于 2025-04-09 22:50:01 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#springboot html css yml

Springboot 专栏收录该内容

24 篇文章

订阅专栏

本文介绍在Spring框架中如何正确配置静态资源（如css、js、img等）的访问路径，确保html页面能顺利加载这些资源。特别强调了在application.yml中设置static路径的方法，以及在html链接中使用路径的正确方式。

如果你在application.yml中设置了访问static目录下的所有的静态资源（css、js、img），那么在html页面中就不用添加static路径

spring:
  resources:
    static-locations: classpath:static/

但是css前面还是要加斜杠，不然还是无法访问

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/css/bootstrap.css" rel="stylesheet">
</head>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Woo_home

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

解决SpringBoot前端jsp、html页面无法加载css、js等文件的问题

轻描时光

01-12

1529

解决SpringBoot前端jsp、html页面无法加载css、js等文件的问题

springboot项目运行，访问localhost网页突然css样式都无法显示了

qq_52775647的博客

05-21

982

参与评论您还未登录，请先登录后发表或查看评论

springboot 项目中css js 等静态资源无法访问的问题

weixin_30725467的博客

07-15

710

目录问题场景问题分析问题解决问题场景今天在开发一个springboot 项目的时候突然发现 css js 等静态资源竟然都报404找不到，折腾了好久终于把问题都解决了，决定写篇博客，纪录总结一下。给同样踩坑的同学参考一下，同时自己也免得以后忘记了又要重新花时间折腾。项目...

新建springboot项目访问不到js,css静态资源的一种原因

weixin_42479546的博客

08-16

700

新建springboot项目访问不到js,css静态资源的一种原因静态资源被springboot拦截了静态资源被springboot拦截了我们在项目配置文件application.yml中添加 mvc: static-path-pattern: /static/** 解开拦截，就可以访问了 ...

springboot项目打开后无法加载css、js，原来是因为配置上多此一举了

qq_57362672的博客

03-27

847

问题出在springboot会自动配置resources文件中的static地址，而我在测试的时候用@configuration注解手动配置了资源路径导致出错，这个代码删掉就行，规规矩矩按照springboot默认的资源存放地址就行。我的springboot项目里的css等资源文件一般都放在static里，页面放在templates中。打开springboot项目后只能显示标签。看到是css等文件没有加载进项目中。

解决SpringBoot中无法访问js、css、img等静态资源的问题

IT教育任姐姐的博客

12-14

4323

一. 异常问题我一开始在SpringBoot中的resources/static/目录下创建了easeui、layui等静态资源目录，然后在html文件中我一开始如下图所示进行引用。结果访问页面的时候，就导致了如下效果：二. 原因分析这是因为Springboot默认的静态资源路径为static，我们不需要再添加/static/前缀，所以需要使用正确的方式来引用，否则就会导致404的问题。三. 解决办法 <link rel="stylesheet" href="/lay

Spring Boot无法访问css，js等静态资源的问题

热门推荐

无_言的笔记本

09-18

9万+

在intellij IDEA中编写了一个Spring Boot项目，运行时发现外链的css样式无法载入进页面，但是按住Ctrl又能点进css文件，这证明编辑器是能识别到这个css文件的。那么浏览器中的网页没有css样式的原因就在于spring boot对静态资源的访问方式了。原理spring boot框架里面包括了很多spring框架大家族的默认配置文件，其中的springmvc配置文件中有对静态资

[已解决]springboot访问不到webapp中的js、css、图片、404

yfs1024

03-23

1391

我的问题：在打jar包的时候，因为自己的项目目录的问题，含有webapp，而Springboot默认是不编译其中的内容，需要通过配置文件指定一下解决方法在`pom.xml` 的build标签中告诉Maven打包的时候把我的资源文件也一块打包

【Spring Boot】无法访问css，js等静态资源的问题

weixin_42956047的博客

01-01

1503

项目背景系统环境： springboot Idea 使用springboot内嵌的服务器tomcat 问题描述改进项目的新需求：根据业务需求，要求前端发送请求到后台，后台将服务器指定目录的资源（图片文件）压缩成zip格式的压缩包，并将该压缩包放置于项目的资源目录下，并将该文件名返回给前端。前端再直接访问springboot项目的静态资源文件，如：http://localhost:8080/...

一个Springboot项目页面中CSS,JS文件加载失败的问题

太酷啦

07-06

4385

用浏览器打开页面有样式，但是整个项目跑起来的时候跳转的页面就会丢失样式，浏览器控制台会报错提示这些文件加载失败。页面内引入样式表，看起来没有任何问题，相对路径没有错误，也没有报错。......

Spring Boot无法访问css，js，图片等静态资源的三种解决方法

blankor的博客

03-24

2679

问题今天在写一个Spring Boot项目的时候发现了一个问题，无法访问static目录下的文件夹里面的静态资源，如css， js和图片，在网站中也没有找到这些静态文件的地址。在网上找了好几种解决方法也没有用。但是我之前使用Spring Boot的时候并没有出现这个问题。所以我找出了以前写的项目，对比了一下，终于发现了问题：以前的项目我是把所有的静态文件全都放在了static这个文件...

SpringBoot的Web开发支持【超详细【一篇搞定】果断收藏系列】

hnsgsdsagaaq的博客

03-29

1330

**Keafmd@author: 牛哄哄的柯南*//***/@Override@Override/**Keafmd@author: 牛哄哄的柯南*/@Override/**Keafmd@author: 牛哄哄的柯南*/@OverrideSystem.out.println(“FirstListener.sessionCreated: Session被创建”);

关于springboot无法加载css问题

JackMa的博客

09-13

1232

关于springboot无法加载css问题

SpringBoot页面跳转访问css、js等静态资源引用无效解决

安赫' 的博客

09-07

1220

解决SpringBoot页面跳转访问css、js等静态资源引用无效

解决springboot 无法访问静态资源css js的问题

画船吹风听雨眠

01-22

2582

相信很多人初学springboot的时候都被这个问题困扰了很久，这个问题跟很多东西有关，下面来一一讲解。 1、静态文件放置的目录是否正确 springboot项目在自动生成的时候会有两个文件夹，一个是static,一个是templates，如果我们使用 <dependency> <groupId>org.springframework.boot</gr...

SpringBoot无法访问静态资源文件CSS、Js问题

最新发布

2301_80225424的博客

04-09

824

在做一个关于springBoot实验的时候遇到了无法访问静态资源这个问题一直无法解决后来看到一篇博客终于解决了。

springboot关于index页面无法访问以及Css样式消失问题

qq_51615662的博客

01-28

791

关于将静态资源导入springboot web项目中的一些问题。

Spring Boot无法访问静态资源(css，js等)的问题

atgeretg的博客

04-24

5032

规范项目结构使用官方默认的扫描路径。毕竟框架的好处就是严格按照要求搭好之后几乎所有的操作都会变得简单，一句话概括就是一劳永逸 spring boot对静态资源的默认扫描路径是： classpath:/static classpath:/public classpath:/resources classpath:/META-INF/resources s...

springboot加入css

03-15

### 如何在 Spring Boot 中正确添加和引用 CSS 文件在 Spring Boot 项目中，为了能够正常引入并使用 CSS 文件，需要遵循特定的目录结构以及可能的配置调整。 #### 静态资源放置位置 Spring Boot 默认会在 `src/main/resources/static` 下查找静态资源文件。因此，所有的 CSS、JavaScript 或图片文件都应当被放置在这个目录下[^3]。例如： ``` src/ └── main/ └── resources/ ├── static/ │ ├── css/ │ │ └── styles.css │ ├── js/ │ │ └── script.js │ └── img/ │ └── logo.png └── templates/ └── index.html ``` 上述结构表明，CSS 文件通常位于 `static/css/` 路径下，而 HTML 页面则存放在 `templates/` 目录中。 --- #### 在 HTML 文件中引用 CSS 文件当 HTML 文件存储于 `templates/` 目录时，可以通过标准的 `<link>` 标签来引用 CSS 文件。需要注意的是，在 Spring Boot 的上下文中，默认情况下可以直接通过 `/css/styles.css` 进行访问。以下是具体的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>  <link rel="stylesheet" href="/css/styles.css"> </head> <body> <h1>Hello, World!</h1> </body> </html> ``` 如果发现样式未生效，则可以尝试检查是否存在路径错误或者缓存问题[^4]。 --- #### 可选配置项某些场景下，可能需要进一步自定义静态资源的映射规则。此时可以在 `application.properties` 文件中设置属性 `spring.mvc.static-path-pattern` 来指定静态资源匹配模式。例如： ```properties spring.mvc.static-path-pattern=/static/** ``` 此配置的作用是允许更灵活地控制哪些 URL 请求会被视为静态资源请求。 --- #### 常见问题排查 1. **路径不正确**：确保 CSS 文件确实存在于 `src/main/resources/static/css/` 目录下。 2. **浏览器缓存**：清除浏览器缓存后再刷新页面查看效果。 3. **模板引擎冲突**：如果是 Thymeleaf 或 FreeMarker 等模板引擎渲染的页面，请确认其语法无误，并且支持外部链接标签[^5]。 --- ### 总结综上所述，要在 Spring Boot 项目中成功引入 CSS 文件，需将 CSS 存放至 `static/css/` 并采用正确的相对路径进行引用；必要时可通过修改 `application.properties` 实现更加精细的资源配置管理。 ---