本文详解如何在 spring boot + thymeleaf 项目中，将数据库中存储的图片 url 渲nder 为实际可见的 `` 元素，而非仅显示文本链接，并提供安全、健壮的 html 模板写法。
在你当前的 Person 实体类中，image 字段（类型为 String）保存的是图片的可访问 URL（例如 https://example.com/images/avatar.jpg 或 /images/default.png），而你在 Thymeleaf 模板中使用了 <td th:text="${person.image}" /> —— 这只会以纯文本形式输出 URL 字符串，不会渲染为图片。
要真正显示图片，需改用 HTML 的 <img> 标签，并通过 Thymeleaf 的 th:src 属性动态绑定图片地址：
<td>
<img th:src="${person.image}"
th:alt="${person.name} + ' avatar'"
width="60"
height="60"
style="border-radius: 4px;" />
</td>⚠️ 注意事项：
- th:src 会自动对 URL 进行转义和安全性校验，推荐始终使用它而非原生 src；
- 若 person.image 可能为 null 或空字符串，建议添加条件判断避免渲染无效 <img> 标签：
<td th:if="${person.image != null and #strings.length(person.image) > 0}"> <img th:src="${person.image}" th:alt="${person.name}" /> </td> <td th:unless="${person.image != null and #strings.length(person.image) > 0}"> <span class="text-muted">No image</span> </td> - 若数据列表 persons 可能为空，应在表格外层添加保护性判断，提升用户体验与页面健壮性：
<div th:if="${#lists.isEmpty(persons)}"> <p class="text-center text-muted">No persons found.</p> </div> <table class="table table-bordered table-striped" th:if="${not #lists.isEmpty(persons)}"> <!-- 表头与 th:each 循环内容 --> </table>
✅ 最终优化后的表格主体片段示例：
<tbody>
<tr th:each="person : ${persons}">
<td th:text="${person.name}"></td>
<td>
<img th:if="${person.image}"
th:src="${person.image}"
th:alt="${person.name} + ' profile image'"
width="50" height="50"
class="rounded" />
<span th:unless="${person.image}" class="text-muted">—</span>
</td>
<td th:text="${person.number}"></td>
</tr>
</tbody>总结：Thymeleaf 不需要额外 JavaScript 即可完成图片渲染；核心是用 th:src 替代 th:text，并结合空值校验与语义化结构，确保模板既功能正确又具备良好的容错性与可维护性。
