06--SpringBoot之拿到你的图片！

最新推荐文章于 2024-10-08 18:14:30 发布

原创最新推荐文章于 2024-10-08 18:14:30 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#SpringBoot #url

SpringBoot 同时被 2 个专栏收录

12 篇文章

订阅专栏

SpringBoot

12 篇文章

订阅专栏

本文介绍如何在SpringBoot项目中实现图片上传及通过浏览器访问的功能。通过配置资源处理器，可以轻松实现静态资源如图片的访问。此外，还展示了如何在前端页面中使用HTML和CSS显示上传的图片。

笔者知道这招非常高兴，SpringBoot本身集成TomCat等web服务器，
Tomcat用的比较熟，但怎么访问上传进来的文件呢?Root文件夹都没有。
难道部署到服务器上，还要在服务器上开个Tomcat?我相信SpringBoot应该不会这样吧，so……

1.原来配置一下就行了：toly1994.com.toly01.config.WebConfig

/**
 * 作者：张风捷特烈
 * 时间：2018/7/16:20:56
 * 邮箱：1981462002@qq.com
 * 说明：拿到你的图片
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        //在F:/SpringBootFiles/Image/下如果有一张 Excalibar.jpg的图片，那么：
        //【1】访问：http://localhost:8080/imgs/Excalibar.jpg 可以访问到
        //【2】html 中 <img src="imgs/Excalibar.jpg">
        registry.addResourceHandler("/imgs/**").addResourceLocations("file:F:/SpringBootFiles/Image/");
    }
}

2.css+html 宝刀出鞘，走起

css

h1{
    color: #00f;
}
.container{
    width: 1200px;
    height: 800px;
}

.container img{
    width: 600px;
}

html

<body>
<h1>thymeleaf in spring boot</h1>
<div class="container">
    <img src="imgs/Excalibar.jpg">
</div>
</body>

详情可见04–SpringBoot之模板引擎–thymeleaf
访问：http://localhost:8080/useData

图片显示.png

至此，一个上传图片，然后显示图片，跨越前后端的微小事实就完成了。基于此，
有一定html+css+javascript的人相信可以做一个简单的网页相册。
下一阶段，将讲述一下：SpringBoot如何操作数据库，来执行更多功能。