如何在 Thymeleaf 中有条件地显示图像？答案

【问题标题】：How to show an image conditionally in Thymeleaf?如何在 Thymeleaf 中有条件地显示图像？
【发布时间】：2018-09-27 13:04:54
【问题描述】：

我有一个控制器，它返回一个ReponseEntity<byte[]> 图像，我可以用以下标签显示它：

<img th:src="@{'./my-files/main-logo'}"

我还可以使用此标签显示 /img/ 文件夹中的图像：

<img th:src="@{/img/default-logo.png}"

我想在存在时显示来自数据库的图像，如果 ResponseEntity 为空，则默认显示来自文件夹的图像。

我尝试了各种三元条件，但都没有奏效。有什么建议吗？

【问题讨论】：

您是否尝试在您的<img> 中添加属性th:if="${...}"？（... 是您检查图像是否为空的地方）
@TwiN 要做到这一点，我应该在模型中添加一个变量，表示图像为 null ？我正在使用的控制器返回一个 ResponseEntity ，它是找到它时的图像，否则返回 null 。如何检查 ResponseEntity 是否为 null ？

【解决方案1】：

尝试在<img /> 标记中使用属性th:if="${...}"。

您可以尝试调用以编程方式返回图像的方法（例如nameOfTheImageController.getImage(...)）并向模型添加一个布尔值，表示图像是否为空。

然后，您可以在<img> 的th:if 中添加该布尔变量。

更新

正如在评论中提到的 HTML, Thymeleaf - displaying an image conditionally，您应该将您的 <img> 标签包裹在 <div> 中，并将 th:if 属性放在 <div> 标签中。

【讨论】：

【解决方案2】：

在我看来，如果没有主徽标，您应该更改/my-files/main-logo 控制器以将img/default-logo.png 作为ResponseEntity<byte[]> 返回，而不是更改图像的src。这样你就可以保持你的图像标签不变：

<img th:src="@{'./my-files/main-logo'}" />

如果您不想这样做，那么是的，您必须在控制器中添加一些内容，告诉您是否有主徽标。例如这样的事情：

<img th:if="${has_logo}" th:src="@{'./my-files/main-logo'}" />
<img th:unless="${has_logo}" th:src="@{/img/default-logo.png}" />

【讨论】：

【解决方案3】：

请使用以下语法。当响应为空时，在控制器中添加模型属性 hasImageInDatabase。然后从 thymeleaf 使用以下语法。

<img th:src="${(hasImageInDatabase ?: '/my-files/main-logo': '/img/default-logo.png'}"/>

【讨论】：

【解决方案4】：

这对你有用：

<img th:src="./my-files/main-logo" onerror="this.onerror=null;this.src='/img/default-logo.png';">

这意味着如果照片的第一个链接无效("./my-files/main-logo" ) 或者是null，它将显示第二个photo('/img/default-logo.png')。

【讨论】：