持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

对于 Thymeleaf 模板引擎的基础知识和在 SpringBoot 中的使用，在之前已经有所介绍，可以浏览一下，加深印象。

Thymealeaf 基础

SpringBoot 中引入 Thymeleaf

今天本篇文章来学习一下使用 Thymeleaf 模板引擎展示图片数据的方法。

HTML 中展示图片的方式多种多样，其中最常用的有 页面背景图展示和 img 图片展示。

对于 HTML 页面背景图片，需要对 html 中的 body 标签设置

通过 css 设置元素 (body) 标签的 background-image 属性

使用 background-image 属性设置元素背景图片

默认从左上角开始，如果尺寸不足以填充，会在水平和垂直方向重复放置图片

元素块背景的大小包括填充内容和边界，不包括边距

其中的 URL 代表图片的地址，可以使用本地图片路径、网络图片路径、base64 编码、二进制流等形式展示图片

图片是否重复放置可以通过背景图片的属性设置

背景相关属性

使用 Thymeleaf 的语法来动态展示后端传入的图片时，需要使用字符串拼接相关语法。

Thymeleaf 语法中需要通过操作 style 设置标签的背景属性值

使用 Thymeleaf 语法时需要拼接，注意所有属性增加单字符来拼接字符串

html 中可能会无法识别 @ 符号，但是不影响使用

Thymeleaf 请求服务返回二进制流好使；返回 base64 图片显示不成功；

img 标签展示图片是通过其属性 src 来指定图片源信息，src 内容同样有多种来源方式。

本地图片路径

网络图片路径

base64 图片编码，需要在图片编码字符串增加前缀 data:image/png;base64,

图片二进制文件流

使用 Thymeleaf 动态展示图片时，需要对 img 标签的 src 使用 th:src 替代，并在内容中设置后端接口路径，加载时动态请求服务将返回内容赋值到 img 元素中。

后端返回文件流时，可以通过响应体的方式返回或者通过二进制数组的方式返回。

返回类型为 void，使用请求参数中的 HttpServletResponse 来将流写入响应。

除了通过 HttpServletResponse 外，还可以将方法返回类型设置为 ResponseEntity ，将图片以二进制形式返回。