我已经创建了一个web应用程序使用(Spring Boot + Thymeleaf)

Question

我的问题是显示2个不同的图像，包括使用Thymeleaf数据库的数据值以下是UI示例:

我需要显示espece。png付款"espece">并显示check.png付款&;票面支票&;

HTML:

<div class="row">
<div class="col-lg-4" th:each="projets : ${listeProjets}">
<div class="card border border-primary">
<div class="card-header bg-transparent border-primary d-flex align-items-start">
<h5 class="my-0 text-primary" th:text="${projets.nomProjet}"></h5>
<div class="flex-shrink-0 ms-2"> 
<img class="card-img-top" alt="" src="/assets/images/tache/espece.png" width="40" height="40" />
</div>
<div class="flex-shrink-0 ms-2">
<a href=""><i class="bx bx-x font-size-20"></i></a>
</div>
</div>
<div class="card-body">
<h5 class="card-title">card title</h5>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
role="progressbar" aria-valuemin="0" aria-valuemax="100" 
th:style="'width:'+${projets.avancement}+';'" th:text="${projets.avancement}"> 
</div>
</div>
<p class="card-text">Some quick example</p>
</div>
<div class="card-footer bg-transparent border-primary">
<button type="button" class="btn btn-outline-light waves-effect w-100" data-bs-toggle="modal" data-bs-target="#addModal">
<i class="bx bx-plus font-size-16 align-middle"></i>Ajouter Tâche
</button>
</div>
</div>
</div>
</div> 

Java类:

@Entity
public class Projet {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private int id;
@Column(nullable = false, length = 25)
private String nomProjet;
@Column(length = 100)
private String description;
private Date dateDebut;
private Date dateFin;
private float prix;
@Column(length = 15)
private String methodePaiement;
@Column(length = 10)
private String avancement;

@ManyToOne
@JoinColumn(name = "clientid", insertable = false, updatable = false)
private Client client;
private int clientid;

/** Default Constructor, getters and setters **/ 

}

Answer 1

<img class="card-img-top" alt="" th:with="paymentImageName = ${projets.methodePaiement == 'espece'}? 'espece' : 'check'" th:src="@{/assets/images/tache/{imageName}.png(imageName=${paymentImageName})}" width="40" height="40" />

1. 通过使用:with，我引入了局部变量paymentImageName，它根据条件表达式设置了适当的名称。
2. 使用链接URL处理图像URL，具有适当的图像名称，在步骤#1中设置，并已被Thymeleaf根据属性优先级解析
3. 阅读更多关于百里香