Spring boot 无法加载css样式，image解决办法

最新推荐文章于 2024-04-04 12:49:11 发布
置顶 最新推荐文章于 2024-04-04 12:49:11 发布
阅读量3.3w 收藏 39
点赞数 33
分类专栏： spring boot 分享 文章标签： Spring boot 无法加载css样式，image解决办
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29314861/article/details/79497281
版权

最近在 给公司做一个系统，使用了springboot框架，同时也遇到了一些大坑

在网上找到了一个好看的模版的，（非前后端的分离）但是无法加载css和image的文件

今天跟大家分享一下我碰到的坑，正常界面是这样的。很美很漂亮吧。



但是没配置完成是这样的，





有没有想砸电脑的冲动呀 宝宝们


现在我告诉大家怎么回事

1.打开浏览器的F12功能 你发现都是css报404


这是为什么呢 ？因为你配置application的时候已经配置请求去找template下的静态资源了 你的css js已经放在static下了所以



2.html页面中的引用一定不要加上static 直接是static下的js/你所引用的.js千万不要加static 以前spring的时候你可以把鼠标放在这里点过去现在不需要。


这是正确的哦




qq_29314861
关注
  • 33
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 25
    评论
专栏目录
详解spring boot容器加载完后执行特定操作
08-28
主要介绍了详解spring boot容器加载完后执行特定操作，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
spring cloud eureka无法加载样式wro.css和脚本wro.js
lieying411
05-21 2160
在《Spring Cloud微服务全栈技术与案例解析》书籍中的eureka章节，按照书籍中的配置写法，打开localhost:8761页面，无法加载wro.css和wro.js。这是因为在application.properties中添加了spring.resources.add-mappings=true。这导致没有为静态资源添加路径映射。因此只需要修改为false就可以访问静态资源。 eur...
为什么image里面的图片有些浏览器能访问到有些不能
qq_42257131的博客
01-13 561
这个原因大部分都是因为文件名不合规，试着改下文件的名字就可以了
Spring Boot开发Web应用，CSS的文本样式属性值
最新发布
qiqiyuer的博客
04-04 609
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。
springcloud构架理解、参数性能调优和常见报错
qq_38663077的博客
07-26 647
相关地址 网关官方参考地址：https://projects.spring.io/spring-cloud/spring-cloud.html#_router_and_filter_zuul 参考地址： https://blog.csdn.net/w1014074794/article/details/88571880 https://www.jianshu.com/p/ebd62bac2...
通过Spring cloud gateway跨域访问不到HTML页面引用的js,css等静态资源问题
weixin_53771038的博客
08-05 2838
在学习springcloud微服务框架时，我发现在通过服务网关gateway路由地址的方法，访问不到HTML页面所引用的js,css等静态资源。项目框架是这样的： 后端： 一个Eureka注册中心，所有的服务都要注册到这里。 一个providers服务提供者，同时也是服务消费者，因为这里只写了一个功能，所有的静态资源也是在这里。它的端口号是9091. 一个Spring Cloud Config分布式配置中心，通过它我们可以将放在gitee这个远程仓库中的微服务的配置文件联系起来。 一个gateway服务网关
css样式
切躁切勇,伏枥藏锋
11-04 3812
字体属性：(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位：PX、PD、EM 粗细 {font-weight: b...
ImageIO.write(bufferedImage)(输出图片时，图片格式和样式调整)
qq_29404363的博客
01-17 7220
ImageIO.write(bufferedImage)(输出图片时，图片格式和样式调整) 在编写图像二值化、灰度化的时候无意间发现在方法中使用ImageIO.write输出图像时仍然执行给bufferedImage赋值时候的语句，下面贴上代码： import java.awt.image.BufferedImage; import java.io.File; import java.io.IOE...
Springboot部署war项目文件到Tomcat静态文件(css、js和图片等)加载不出来的解决方法
esqabc的博客
04-19 3794
Springboot的war包部署tomcat–静态文件（css、js）加载不出解决方法 1，Springboot打包war文件（application.properties） -配置启动端口号 server.port=8066 -配置项目访问路径（如果不需要项目访问路径,请注释掉，我这里是注释掉的） #server.servlet.context-path=/elec 2，配置war网页HTML（js请求地址）访问地址 //我这里是全局地址 //项目访问总入口 var appLocalHost
Springboot 引入css报错404not found解决，无法加载css
u013596592的博客
03-27 1101
在网上查了半天都没有找到正确的解决方法,后面找到在pom.xml文件的build中添加： <!--自己项目中有什么后缀的文件就添加进去--> <resources> <resource> <directory>src/main/resources</directory> <includes> <include>**/*.yml</include>
一个Springboot项目页面中CSS,JS文件加载失败的问题
太酷啦
07-06 4055
用浏览器打开页面有样式，但是整个项目跑起来的时候跳转的页面就会丢失样式，浏览器控制台会报错提示这些文件加载失败。页面内引入样式表，看起来没有任何问题，相对路径没有错误，也没有报错。......
Springboot中解决静态资源加载无效问题，例如img、css、js等
zw1_csdn的博客
08-01 2025
Springboot很大程度上简化了Spring web工程中的配置，但是还是需要一些基础配置。配置方式有两大类，一是通过java文件修改默认配置参数，二是直接在application.properties中修改配置。自定义静态文件路径后，引入资源无法加载，例如添加图片路径但是没有展示。解决方法如下(这里介绍application.properties)： 一、查看工程静态资源文件...
详解Spring Boot 配置加载顺序及属性加载顺序
08-27
主要介绍了详解Spring Boot 配置加载顺序及属性加载顺序,本章内容基于 Spring Boot 2.0 进行详解，感兴趣的朋友跟随脚本之家小编一起看看吧
Spring Boot容器加载时执行特定操作(推荐)
08-28
主要介绍了Spring Boot容器加载时执行特定操作及spring内置的事件,需要的朋友可以参考下
spring boot启动加载数据原理分析
08-30
实际应用中，我们会有在项目服务启动的时候就去加载一些数据或做一些事情这样的需求。这时spring Boot 为我们提供了一个方法，通过实现接口 CommandLineRunner 来实现。下面给大家详细介绍下，需要的的朋友参考下吧
spring boot 本地图片不能加载（图片路径）的问题及解决方法
08-27
主要介绍了spring boot 本地图片不能加载（图片路径）的问题,解决的办法其实很简单，只要写一个配置文件，也就是图片位置的转化器，原理是虚拟一个在服务器上的文件夹，与本地图片的位置进行匹配。需要的朋友可以...
springcloud网关服务访问子模块css js提示404
梦奇
12-30 654
第一种办法： 在网关yml中添加 第二种办法： 如果你是相对路劲 添加…/即可
关于springboot无法加载css问题
JackMa的博客
09-13 1089
关于springboot无法加载css问题
SpringCloud-1 zuul网关转发外部项目时静态资源css,js访问不到
ClearLoveQ的博客
11-19 2014
springcloud自己的modlue资源可以加在，但是 springcloud在转发到其他外部服务器的时候，转发到的项目的静态资源css,js图片等无法加载 主要是解决办法是：微服务项目的某个 spring.application.name: 一定要是你外部项目发布出去的上下文名字 1.首先看一下微服务项目这边的结构，我们拿eurekaservice01做转发测试，转发到其他项目 eurekaservice01这个module的yml配置文件 注意这个module中的服务名称要写...
答辩问使用spring boot和 vue如何实现轮播图
05-22
使用Spring Boot和Vue.js实现轮播图可以分为以下几个步骤： 1. 在Spring Boot中编写一个RESTful API，用于获取轮播图的数据。可以使用Spring Data JPA或者MyBatis等框架来操作数据库。 2. 在Vue.js中编写前端代码，用于展示轮播图。可以使用第三方轮播插件如swiper或者vue-awesome-swiper，也可以手动编写轮播组件。 3. 在Vue.js中使用axios或者fetch等工具来调用后端API，获取轮播图的数据。 4. 将获取到的轮播图数据传递到轮播组件中，展示轮播图。 下面是一个简单的示例，使用Vue.js和Spring Boot实现轮播图： 1. 后端代码（Spring Boot）： ``` @RestController @RequestMapping("/api") public class CarouselController { @Autowired private CarouselRepository carouselRepository; @GetMapping("/carousels") public List<Carousel> getCarousels() { return carouselRepository.findAll(); } } ``` 2. 前端代码（Vue.js）： ``` <template> <div> <swiper :options="swiperOption"> <swiper-slide v-for="(item, index) in carousels" :key="index"> <img :src="item.image"> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </div> </template> <script> import axios from 'axios' import Swiper from 'swiper' import 'swiper/dist/css/swiper.css' export default { data () { return { carousels: [], swiperOption: { pagination: { el: '.swiper-pagination' }, loop: true } } }, mounted () { axios.get('/api/carousels') .then(response => { this.carousels = response.data this.$nextTick(() => { new Swiper('.swiper-container', this.swiperOption) }) }) .catch(error => { console.log(error) }) } } </script> <style> .swiper-slide img { width: 100%; } </style> ``` 在上面的代码中，我们使用了vue-awesome-swiper插件来实现轮播图的效果，同时使用axios来调用后端API获取轮播图数据。在mounted钩子函数中，我们使用new Swiper()方法来初始化轮播图组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 25
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值