Springboot项目中 前端展示本地图片

本文使用的是Springboot官方推荐的thymeleaf(一种页面模板技术)

首先在pom文件加依赖

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
  • Springboot项目中resources文件包含 templatesstatic等文件夹

  • 其中templates存放html界面,static存放css、js等文件

  • 想要读取图片,在static文件下创建images文件夹,放入图片。

  • 测试时可以在浏览器地址栏输入localhost:80880/images/xxx.jpg,此时网页可以显示即路径正确。

  • 在html界面调用时src="images/xxx.png/jpg"

此时即可成功调用。

Springboot项目中 前端展示本地图片的更多相关文章

  1. SpringBoot12 QueryDSL01之QueryDSL介绍、springBoot项目中集成QueryDSL

    1 QueryDSL介绍 1.1 背景 QueryDSL的诞生解决了HQL查询类型安全方面的缺陷:HQL查询的扩展需要用字符串拼接的方式进行,这往往会导致代码的阅读困难:通过字符串对域类型和属性的不安 ...

  2. springboot项目中js、css静态文件路径访问

    springboot静态文件访问的问题,相信大家也有遇到这个问题,如下图项目结构. 项目结构如上所示,静态页面引入js.css如下所示. 大家肯定都是这样写的,但是运行的话就是出不来效果,图片也不显示 ...

  3. 五分钟后,你将学会在SpringBoot项目中如何集成CAT调用链

    买买买结算系统 一年一度的双十一购物狂欢节就要到了,又到剁手党们开始表演的时刻了.当我们把种草很久的商品放入购物车以后,点击"结算"按钮时,就来到了买买买必不可少的结算页面了.让我 ...

  4. SpringBoot项目中,表单的验证操作

    在创建Springboot项目中,我们使用了表单验证操作,这一操作将极大地简化我们编程的开发 1.接收数据,以及验证 @PostMapping("/save") public Mo ...

  5. 国际化的实现i18n--错误码国际化以及在springboot项目中使用

    国际化 ,英文叫 internationalization 单词太长 ,又被简称为 i18n(取头取尾中间有18个字母); 主要涉及3个类: Locale用来设置定制的语言和国家代码 Resource ...

  6. 在SpringBoot项目中添加logback的MDC

    在SpringBoot项目中添加logback的MDC     先看下MDC是什么 Mapped Diagnostic Context,用于打LOG时跟踪一个“会话“.一个”事务“.举例,有一个web ...

  7. 自身使用的springboot项目中比较全的pom.xml

    在学习的时候常建新的项目,mark下商用的jar <dependency> <groupId>org.mybatis</groupId> <artifactI ...

  8. springboot 项目中获取默认注入的序列化对象 ObjectMapper

    在 springboot 项目中使用 @SpringBootApplication 会自动标记 @EnableAutoConfiguration 在接口中经常需要使用时间类型,Date ,如果想要格式 ...

  9. 解决springboot项目中@Value注解参数值为null的问题

    1.错误场景: springboot项目中在.properties文件(.yml)文件中配置了属性值,在Bean中使用@Value注解引入该属性,Bean的构造器中使用该属性进行初始化,此时有可能会出 ...

随机推荐

  1. nginx前端服务部署

    一.登录服务器 登录跳板机 执行list,列出所有机器 执行dssh 机器序号,如dssh 1,选择机器 二. 创建nginx配置文件 进入nginx配置目录:cd usr/local/nginx/c ...

  2. python自动化第二课 - python基础

    1.标识符(identitifier),识别身份 定义:在编程语言中,标识符就是用户编程时使用的名字,用于给变量.常量.函数.语句块等命名 标识符命令规范: 1)英文,数字以及下划线(_)但不能以数字 ...

  3. Python 【基础常识概念】

    深浅拷贝 浅copy与deepcopy 浅copy: 不管多么复杂的数据结构,浅拷贝都只会copy一层 deepcopy : 深拷贝会完全复制原变量相关的所有数据,在内存中生成一套完全一样的内容,我们 ...

  4. Mysql(Mariadb)之SET语法分析以及系统变量和用户变量分析(英文&中文)(转载)

    SET Syntax SET variable_assignment [, variable_assignment] ... variable_assignment: user_var_name = ...

  5. 关于“关键字synchronized不能被继承”的一点理解

    网上看到很多对关键字synchronized继承性的描述只有一句"关键字synchronized不能被继承",并没有描述具体场景,于是自己做了以下测试. //父类 public c ...

  6. Ajax上传数据和上传文件(三种方式)

    Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) <!DOCTYPE html> <html la ...

  7. vue中moment.js的使用

    一.介绍 moment.js是一款现在对时间处理的强大的函数. Moment被设计用于在浏览器和Node.js中工作. 目前ci系统使用的浏览器有:IE8.IE9在Windows 7上.Chrome在 ...

  8. Linux安装Elasticsearch7.x

    Elasticsearch下载地址: https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.1.1-linux-x8 ...

  9. 对象数组化 Object.values(this.totalValueObj).forEach(value => {

    对象数组化 Object.values(this.totalValueObj).forEach(value => {

  10. 039.集群网络-Pod和SVC网络实践

    一 Pod和SVC网络 1.1 实践准备及原理 Docker实现了不同的网络模式,Kubernetes也以一种不同的方式来解决这些网络模式的挑战.本完整实验深入剖析Kubernetes在网络层是如何实 ...