如何在Thymeleaf图片标签中用通配符兼容JPG/PNG格式？

如果你的图片文件名（不含后缀）存在${image}变量中，想要同时支持JPG和PNG格式，有几种可行的实现方式：

方案1：后端返回完整文件名（推荐） #

让后端将包含后缀的完整文件名存入${image}变量（比如"banner.jpg"或"avatar.png"），直接拼接路径即可：

<!-- 方式1：使用Thymeleaf的URL表达式（更规范） -->
<img th:src="@{http://localhost:8081/images/{imageFileName}(imageFileName=${image})}" />

<!-- 方式2：字符串拼接 -->
<img th:src="'http://localhost:8081/images/' + ${image}" />

这种方式最简洁，也避免了前端处理后缀的麻烦，是最优解。

方案2：后端单独返回后缀变量 #

如果后端只能提供不带后缀的文件名，可额外返回后缀变量（比如${imageExt}，值为"jpg"或"png"），再拼接路径：

<img th:src="'http://localhost:8081/images/' + ${image} + '.' + ${imageExt}" />

方案3：前端尝试双格式（兼容加载失败场景） #

如果无法从后端获取后缀信息，可借助HTML的onerror事件实现加载失败时切换格式：

<img th:src="'http://localhost:8081/images/' + ${image} + '.jpg'" 
     onerror="this.src='http://localhost:8081/images/' + '[[${image}]]' + '.png'" />

这里用[[${image}]]让Thymeleaf先渲染变量值，再嵌入到JavaScript代码中。

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