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">
之前使用都是将静态资源放在静态资源目录,之后前台直接写全相对项目路径就可以使用了
有错误请指出,我感觉他这一个一个配好浪费时间,还不能一次配一个父目录,文件名如果很长那就更难受了,谁有好的方法可以在下方留言哦