spring boot+html访问图片

最新推荐文章于 2025-04-26 21:31:31 发布
最新推荐文章于 2025-04-26 21:31:31 发布
阅读量1.2k 收藏
点赞数
分类专栏： spring boot SpringMVC 文章标签： spring html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45496075/article/details/120349150
版权
本文介绍了解决前端项目中图片无法加载的问题。通过在配置文件中正确设置静态资源路径，最终成功显示图片。适用于使用不同开发工具及配置文件格式的开发者。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

刚开始接触时，总是提示无法载入图片，百度尝试过很多解决办法，一般都是修改配置文件指定一下静态资源路径，例如在配置文件加入：
spring.resources.static-locations=‘静态资源路径’

但我有点不一样，可能是因为开发工具版本不一样，我在application.yml配置文件中，加入类似代码：

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

在这里插入图片描述
看一下我的图片目录：
在这里插入图片描述
login.html页面：
在这里插入图片描述

然后访问页面：
在这里插入图片描述图片就出来啦

基于Spring Boot+VUE的新闻管理系统的设计与实现-计算机毕设 附源码12529
ID3461074420的博客
08-17 1090
1.普通用户功能 (1)注册登录：新用户可以通过注册成为系统用户，注册后可以用账号密码登录系统。 (2)首页：首页界面是用户访问系统的入口页面，用户可以查看首页展示的轮播图，新闻资讯等信息。 (3)交流论坛：用户可以发布论坛内容，可以查看交流论坛列表中某个论坛的详情并可以进行点赞、收藏和评论。 (4)通知公告：用户可以查看系统发布的网站公告、关于我们、联系方式、网站介绍等信息。 (5)新闻资讯：用户可以查看新闻资讯列表中某个新闻的详情并可以点赞、收藏和评论 (6)我的：用户点击我的头像的下拉菜单“我的账户”
SpringBoot图片上传和访问路径映射
08-25
主要为大家详细介绍了SpringBoot图片上传和访问路径映射，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
spingboot html 图片,SpringBoot添加对静态文件css/html/jpg等的直接访问的支持
weixin_34832116的博客
06-05 376
请直接看四、解决对策，希望本文解决你的问题------正文------一、背景现在网上大多讨论的是对SpringBoot使用由freemarker等模板引擎渲染出的html网页的静态访问的支持。但是对于一个前后端分离的项目，比如前端使用vue、React等写，后端使用Spring家族技术等，往往开发者选择将前端开发的网页通过webpack等直接打包成含组成网页的静态文件的文件夹然后交到后端同学手中...
SpringBoot中html引入照片404失败解决方法（通配符）
最新发布
2301_80320652的博客
04-26 983
通配符和**在Spring Boot中具有不同的用途，了解它们的区别可以帮助我们更好地管理包名和资源文件的匹配。：匹配一个层级，常用于包名匹配，限制较多。**：匹配多个层级，灵活性更高，适用于资源路径的匹配。通过正确使用这些通配符，我们可以更高效地组织和管理Spring Boot项目中的包结构和资源文件。这不仅提高了代码的可读性，也使得项目的维护变得更加方便。希望本文能够帮助你更深入地理解Spring Boot中的通配符用法！如果你有任何问题或想法，欢迎在下方评论区分享。
SpringBoot中如何访问target路径下的图片并显示
qq_62636650的博客
03-11 323
添加配置类WebMvcConfigurer，映射资源访问路径通过路径http://localhost:8081/filePath/1.png就可以访问到图片了另外也可以通过http://localhost:8081/upload/face/1.png访问图片。
Springboot 下面的html无法加载图片
weixin_46351306的博客
07-11 2026
首先清楚这两个目录结构 < static 一般存放的是静态资源,所以你的图片需要存放在static 目录下 并且新建一个目录 images ,再把你的图片放进去.(这是一般性的操作,但不是必须的) 还要一点就是路径问题,鼠标放在 图片的url 链接出能出来图片,说明路径没错. 还是出不来就重启一下Idea和浏览器. 有几次我就是什么也没改,TMD 一重启就出来了. ...
springboot项目html加载linux服务器本地图片
l优快云kingdoml的博客
06-22 1496
springboot项目html加载linux服务器本地图片 将springboot项目部署在阿里云服务器上后，项目中的html页面需要加载存放在服务器的图片 大概描述一下我的情况： 项目中，html文件<img 通过 th:src 获取图片路径。图片路径存放于MySQL数据库中，图片存放在云服务器的/root/images下。现在需要html页面通过数据库中的图片路径，将图片加载到页面。 解决的办法算挺简单的： 配置静态资源的位置 在自己实现WebMvcConfigurer接口的类中加入如下方法
基于Vue + Spring Boot + Redis + MyBatis-plus的餐饮行业定制化软件设计源码
03-04
整个项目包含了丰富的文件类型，其中包括384个项目文件，具体为89个PNG图片文件、69个Java源文件、45个JavaScript文件、44个HTML文件和41个CSS文件等。这些文件共同构成了系统的各个部分，从界面设计到后端逻辑，再...
基于Spring Boot+MyBatis的快速搭建中小型门户网站的tlv8web前后台设计源码
10-09
在本项目中，MyBatis与Spring Boot的结合使得数据访问层的开发变得更加便捷，提升了数据操作的效率。 本项目中包含了大量文件资源，其中包括386个GIF图像、190个CSS样式表、188个JavaScript脚本、178个HTML页面、...
基于spring boot + vue 的房东房屋租赁营收管理系统，前端.zip
01-01
2. `public` 目录：存放静态资源，如HTML模板、图标、图片等。 3. `main.js` 文件：项目入口文件，用于初始化Vue实例并引入其他模块。 4. `App.vue` 文件：Vue应用的根组件，通常包含整个应用的布局。 5. `router` ...
maven + spring boot + jdbc + mysql 定时器 的一个爬虫小程序 .zip
03-08
这些工具帮助爬虫定位和提取目标数据，如文本、图片、链接等。 数据存储： 爬虫将提取的数据存储到数据库、文件或其他存储介质中，以备后续分析或展示。常用的存储形式包括关系型数据库、NoSQL数据库、JSON文件等。...
Springboot通过url访问本地图片代码实例
08-19
主要介绍了springboot通过url访问本地图片代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
springboot 添加背景图片
qq_43718758的博客
03-05 4976
1.目录结构 1.图片不能放到templates中，自己试了显示不出来 2.背景设置 背景的路径和位置很重要，否则显示不出来 结果： 图片没有自适应 我们在body中单独设置 <body style=" background-repeat:no-repeat ; background-size:100% 100%; background-attachment: fixed;"> 实现效果： 完整显示 参考文章：https://blog.youkuaiyun.com/qq_364810
SpringBoot取本地（服务器）的图片展示在html页面解决办法
sdau20171935的博客
08-01 4780
最近做项目，需要访问本地（服务器）的图片，由于之前没有做过图片的显示，所以写完相关代码之后发现无法显示图片，百度查了资料，才发现原因： 本地和服务器请求的url是不一样的，即存在路径问题。下面我写出一种解决办法，供以后记忆使用： 以C盘的下的temp目录为例。 在config目录下创建MyConfiguration,如下图 此处指定的物理路径为c盘的根目录，‘temp’应该放在前台的s...
Springboot 添加图片
qq_39132795的博客
08-05 1760
Springboot 添加图片 框架:ssm mybatis-plus 业务要求: 实现图片上传的操作 url:/pic/upload 参数信息:uploadFile 返回值:ImageVO对象 1. 校验文件有效性(service实现类) 传统图片格式大部分为.jpg .png .gif 以这三个格式为案例 1.1 定义图片后缀名的集合 private static Set<String> imageTypeSet = new HashSet<>(); static{
简单快速的用SpringBoot访问静态资源包括（图片、html）及spring.resources.static-locations不能正常访问其他盘符文件解决方案
凯哥Java的博客
12-20 1342
如果文件不多的话可以考虑将图片放到项目的静态文件夹中。如果图片多的话就不可能一张一张的往里面放了!表示图片资源在本地的位置。表示静态资源访问的格式。
SpringBoot启动自带文件服务器，直接访问本机本地文件夹中的图片，或下载文件
曾某人的博客
01-21 1655
问题描述：配置SpringBoot想要直接在浏览器访问文件夹中的图片或者文件。 1、本机新建存放文件的路径，我用的F:\vueimg 2、SpringBoot项目的application.properties配置文件中，写入 cbs.imagesPath=file:/F:/vueimg/ 配置上自己的路径 3、Java创建config包，新建配置文件WebAppConfig package com.example.img_manage.config; import org.slf4j.LoggerFac
Springboot访问静态资源文件的html以及图片
紫月i的博客
04-06 2502
Springboot的静态资源文件夹是项目的resource目录下的static文件夹，并且Springboot会默认开放静态资源文件，不需要做什么设置 想要访问静态资源文件需要先导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency&g
使用SpringBoot访问图片
Stephen GS的博客
06-06 4457
使用SpringBoot访问图片
spring boot+vue上传图片
01-15
### 使用 Spring Boot 和 Vue 实现图片上传功能 #### 后端部分 (Spring Boot) 为了实现跨域资源共享，在控制器上添加 `@CrossOrigin` 注解可以解决前端与后端之间的跨域访问问题[^2]。 创建一个用于处理文件上传的接口： ```java import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; @RestController @RequestMapping("/api/files") public class FileUploadController { @PostMapping("/upload") @CrossOrigin(origins = "http://localhost:8080") // 假设Vue应用运行在该地址 public String uploadFile(@RequestParam("file") MultipartFile file) { if(file.isEmpty()) { return "Failed to upload empty file."; } try { byte[] bytes = file.getBytes(); // 存储逻辑，比如保存到本地磁盘或云存储 return "Successfully uploaded!"; } catch(Exception e){ return "Error occurred while uploading the file"; } } } ``` 这段代码定义了一个简单的 RESTful API 来接收来自客户端的文件并将其保存下来。这里假设只做基本测试而不涉及复杂的业务逻辑和安全性考虑。 #### 前端部分 (Vue.js) 构建表单组件来允许用户选择要上传的照片，并调用上述服务完成提交操作： ```html <template> <div id="app"> <h1>Image Upload</h1> <!-- 文件输入框 --> <input type="file" ref="fileInput" v-on:change="handleFileChange"/> <!-- 提交按钮 --> <button @click="submit">Submit</button> {{ message }} </div> </template> <script> export default { data(){ return{ selectedFile:null, message:'' }; }, methods:{ handleFileChange(event){ this.selectedFile=event.target.files[0]; }, async submit(){ const formData=new FormData(); formData.append('file',this.selectedFile); await fetch('http://localhost:8081/api/files/upload',{ method:"POST", body:formData }).then(response=>response.text()) .then(data=>{ this.message=data; }); } } }; </script> ``` 在这个例子中，当用户选择了图像并通过点击“Submit”触发事件时，会将选中的文件封装成 `FormData` 对象发送给服务器进行处理。最后更新视图显示返回的消息状态。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值