本文详解如何在 spring boot + thymeleaf 应用中，将数据库存储的图片 url 渲染为实际可见的 `` 元素，而非纯文本链接，并提供安全渲染、空值处理与路径规范等关键实践。
在 Thymeleaf 模板中显示图片的核心在于：将字符串形式的图片 URL 正确绑定到 HTML 标签的 src 属性上，而非使用 th:text 输出纯文本。您当前模板中
✅ 正确写法：使用 th:src 绑定图片地址
假设您的 Person 实体中 image 字段存储的是有效 URL（如 "https://example.com/images/avatar.jpg" 或相对路径 "/images/default.png"），请将对应
<td>
<img th:src="${person.image}"
th:alt="${person.name} + ' 的头像'"
style="max-width:90%" height="80"
style="object-fit: cover; border-radius: 4px;" />
</td>? th:src 是 Thymeleaf 提供的安全属性处理器，会自动对 URL 进行 HTML 转义和上下文路径解析（如应用部署在 /myapp/ 下时，相对路径会自动补全）。
⚠️ 关键注意事项
-
空值防护：若 person.image 可能为 null 或空字符串，直接渲染会导致
或破损图。推荐结合 th:if 或三元运算符处理：
<td> <img th:if="${person.image != null and #strings.length(person.image) alt="如何在 Thymeleaf 中通过 URL 动态显示图片" > 0}" th:src="${person.image}" th:alt="${person.name} + ' 的图片'" width="60" height="60" /> <span th:unless="${person.image != null and #strings.length(person.image) > 0}">无图片</span> </td> -
列表判空优化：在 th:each 外层增加判断，避免空列表渲染空表格行：
<tbody th:if="${not #lists.isEmpty(persons)}"> <tr th:each="person : ${persons}"> <!-- 内容 --> </tr> </tbody> <tbody th:unless="${not #lists.isEmpty(persons)}"> <tr><td colspan="4" class="text-center text-muted">暂无人员信息</td></tr> </tbody> URL 安全性提醒：
若 image 字段来源于用户输入（如后台管理上传），务必在服务端校验 URL 协议（建议仅允许 http://、https://、/ 开头），防止 XSS 或恶意跳转。Thymeleaf 默认不执行 JS，但开放 src 值仍需业务层把关。
? 补充技巧：统一默认图（Fallback）
利用 HTML 原生 onerror 结合 Thymeleaf（注意：onerror 不支持 th: 前缀，需内联 JS）：
<img th:src="${person.image}"
th:onerror="'this.src=' + '''/images/placeholder.png'''"
th:alt="${person.name} + ' 的图片'"
style="max-width:90%" height="60" />或更推荐后端统一处理——在 Controller 中为 null 图片设置默认值，保持模板简洁。
综上，从“显示 URL 文本”到“渲染真实图片”，只需一步：用 替代
，并辅以空值判断与路径规范。这是 Thymeleaf 静态资源集成中最基础也最常被忽略的关键实践。
