如何在Thymeleaf中条件显示图片？数据库图优先，本地图兜底

我来帮你解决这个问题！这种动态切换图片的需求在Thymeleaf里其实有两种靠谱的实现方式，咱们一步步看：

方案一：后端传递状态，用Thymeleaf条件渲染 #

这种方法需要后端提前判断数据库图片是否存在，把状态传递给前端，再用Thymeleaf的条件逻辑切换图片源。

1. 修改页面渲染的Controller
   在返回页面的方法里，添加判断数据库图片是否存在的逻辑，把结果存入Model：

   @GetMapping("/your-target-page")
   public String showPage(Model model) {
       // 这里替换成你实际判断数据库是否有图片的逻辑（比如查询记录是否存在）
       boolean hasDatabaseLogo = logoService.isLogoExists();
       model.addAttribute("hasDatabaseLogo", hasDatabaseLogo);
       return "your-page-template";
   }
   

2. 在Thymeleaf模板中实现切换
   你可以选择更简洁的三元表达式写法：

   <img th:src="${hasDatabaseLogo} ? @{'./my-files/main-logo'} : @{'/img/default-logo.png'}" alt="Site Logo">
   

   或者更直观的双标签写法（避免复杂表达式，可读性更强）：

   <!-- 当数据库有图片时显示 -->
   <img th:if="${hasDatabaseLogo}" th:src="@{'./my-files/main-logo'}" alt="Custom Logo">
   <!-- 当数据库无图片时显示默认图 -->
   <img th:unless="${hasDatabaseLogo}" th:src="@{/img/default-logo.png}" alt="Default Logo">
   

方案二：前端利用onerror事件自动降级（无需后端传状态） #

这种方法更轻量化，不需要后端额外处理状态，直接让浏览器在加载数据库图片失败时自动切换到默认图：

<img th:src="@{'./my-files/main-logo'}" 
     onerror="this.onerror=null; this.src='/img/default-logo.png';" 
     alt="Site Logo">

这里的this.onerror=null是为了防止默认图也加载失败时陷入无限循环（如果你的默认图路径绝对可靠，也可以省略，但加上更稳妥）。

为什么你之前的三元表达式无效？ #

Thymeleaf的表达式是服务器端渲染的，它没法预知浏览器请求图片接口时的返回状态（比如404）。你之前尝试的三元表达式可能直接在里面调用了图片接口，但服务器渲染时无法判断这个接口会返回成功还是失败，所以自然达不到预期效果。上面两种方法分别从后端提前判断、前端错误处理两个角度解决了这个问题。

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