springboot+shymeleaf无法访问静态资源,css,js以及图片

首先贴出资源路径以及引用时候的方法(错误时候的

文件路径

springboot+shymeleaf无法访问静态资源,css,js以及图片

 

前台引用:

        <link href="asserts/css/signin.css" th:href="@{/asserts/css/signin.css}" rel="stylesheet">
...
<img class="mb-4" th:src="@{/asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">

错误:网页静态资源写对前台无法引用

网页中按F12错误提示:
HTTP404: 找不到 - 服务器尚未找到与请求的 URI (统一资源标识符)匹配的任何内容。
​
GET - http://localhost:8888/asserts/css/signin.css

 

下方为我找错误经历,如果不想看可以直接跳到总结,但错误不一定都一样

 

今天利用springboot+shymeleaf学习项目,却发现项目无论如何都访问不到静态资源,由于之前学习时候并没有发生过这种情况,于是去配置中找哪里不对,最后无功而返

想到springboot对静态资源配置是自动放行的,便各种尝试重写路径,当绝对路径访问时候可以访问到,但相对路径访问不到;项目的图片在target包内也进行了编译;且我的静态资源也默认静态资源路径

那么真相已经很明显了

1.target包中有证明我们的图片已经编译了

2.springboot会自动放行,我创建了一个新的项目,将自己的视图拦截器去掉,这样加上第一条就可以保证数据在后台没有问题了

3.接下来去前台测试

<img src="/1.png">
<img src="/asserts/img/1.png">
<img src="/asserts/img/bootstrap-solid.svg">

发现全部显示不出来

 

之前:
在springboot中有静态资源文件夹,只要文件在这几个文件夹中,系统就会自动把他们当做静态资源去加载
如果你想让某些文件夹当做静态资源文件夹
那么就去配置文件添加上:(多个文件拿逗号隔开
spring.resources.static-locations=classpath:/public/img,classpath:/public/css,classpath:/public/js

 

我的静态资源都写在静态资源文件夹下,于是我开始怀疑系统没有将静态资源加载,于是我将这几个静态资源在主配置文件中加上其路径

 

locations=classpath:/public/img,classpath:/public/css,classpath:/public/js

 

再次测试

发现只有第一行图片可以显示出来,样式(css)还是无效,此时已经发现问题所在,是他没有把我的文件当成静态资源文件,接下来css,js都和图片一样的配置,那么久只能是路径问题了

前台调用路径改为:

 <link href="asserts/css/signin.css" th:href="@{/signin.css}" rel="stylesheet">

大功告成

 

之前使用时:并不需要这样配置,我也是没想到会这样,所以中间查错方向都没去怀疑这方面。可能是版本问题吧

这里粘贴一下pom文件:

    <dependencies>
        <!--        引入thymeleaf-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <!--        引入webjars-->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.0.0</version>
        </dependency>
​
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
​
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
​
​
​
​
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
​
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
    </dependencies>

 

总结:

常见可能出现错误:

先查看你的视图拦截器是否拦截了静态资源,如果拦截了,那么将它放行

看自己的静态资源是否在springboot默认静态资源文件夹中,如果没有,则将其移动到默认静态资源文件夹,或者在配置文件将该目录配置为静态资源文件

 

我此次解决错误方法:

1.将静态资源文件放入固定文件夹

2.将这些资源文件夹配置为静态资源文件

spring.resources.static-locations=classpath:/public/img,classpath:/public/css,classpath:/public/js

如果这些静态资源文件属于同一个父目录,那么用/**的方法时无效的???,必须将其上一级,上几级目录都写出来(为啥啊,是我写法错了吗?

3.在前台使用时候不需要加文件目录名字了,只需要写文件名字(所以一定要在properties中将路径写清楚啊)(图片类型文件写上全路径也可以调用

    <link href="asserts/css/signin.css" th:href="@{/signin.css}" rel="stylesheet">

 

 

之前使用都是将静态资源放在静态资源目录,之后前台直接写全相对项目路径就可以使用了

有错误请指出,我感觉他这一个一个配好浪费时间,还不能一次配一个父目录,文件名如果很长那就更难受了,谁有好的方法可以在下方留言哦

 

相关文章: