样式不显示,静态资源路径错误

本文介绍了在SpringBoot项目中,使用Thymeleaf模板引擎时遇到的样式不显示问题。问题源于静态资源路径设置不当,导致CSS文件无法正确加载。通过对IndexController的/web映射路径理解,解析了href引用样式文件时需以/开头的原因,以确保资源从项目的根路径下正确加载。修复方法是在HTML中将href引用改为以/开头,从而解决了样式显示问题。
摘要由CSDN通过智能技术生成

样式不显示,静态资源路径错误

  • 项目目录

问题

  • SpringBoot应用,使用thymeleaf模板引擎。

    通过IndexController的loginPage方法,访问页面login.html

    发现样式显示不出

  • IndexController

    @Controller
    @RequestMapping("/web")
    public class IndexController {
    
        @GetMapping(value = {"/", "/login"})
        public String loginPage() {
            return "login";
        }
        
    }
  • login.html中引用css的片段

    <link href="css/style.css" rel="stylesheet" >
    <link href="css/style-responsive.css" rel="stylesheet" >

解决:

引用css改成

<link href="/css/style.css" rel="stylesheet" >
    <link href="/css/style-responsive.css" rel="stylesheet" >

原因:

1.前提知识

href="css/style.css" 的路径不加/是当前路径,加/是文件所在目录的一级目录。

2.猜测原因

IndexController加了映射路径/web,最后所有静态资源(包括static和templates目录下的文件和目录)会放在xxx路径的web目录下。

href="css/style.css"访问的仍是原来的根路径下。

href="/css/style.css"会从现在的现在的项目路径,也就是xxx路径的web目录下访问

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值