如何从MySQL提取URL传入Thymeleaf模板作为img的src并解决路径错误问题

核心错误原因 #

你当前遇到的问题本质是模板中没有正确读取Image对象里存储URL的属性，直接引用了Image实例本身：

• Thymeleaf渲染非字符串类型变量时，会默认调用对象的toString()方法，你看到的com.liftoff.thymeleafrecipeproject.demo.models.Image@24就是Image类默认的toString返回结果
• 该返回值没有http/https前缀，会被Thymeleaf识别为应用内相对路径，自动拼接上当前服务的域名前缀http://localhost:8080/，最终形成你看到的错误路径

修复方案 #

1. 正确引用Image对象的URL属性 #

假设你的Image实体类中存储图片URL的字段名为url，对应的Getter方法为getUrl()，模板中要明确取该属性的值：

<img th:src="${image.url}" alt="图片">

2. 不要用@{}包裹外部链接 #

如果你的代码里用了Thymeleaf的链接语法@{}包裹URL变量，也会导致带http/https前缀的外部链接被识别为相对路径处理，直接去掉@{}包裹即可。

常见错误写法对照 #

• 错误1：直接引用Image对象

<!-- 错误：会触发toString方法 -->
<img th:src="${image}" alt="图片">

• 错误2：用@{}包裹外部URL

<!-- 错误：@{}会强制将路径识别为应用内相对路径 -->
<img th:src="@{${image.url}}" alt="图片">

内容的提问来源于stack exchange，提问作者atyahoodotcom