my problem is to show 2 different images including the data value from database using Thymeleaf here is the UI exemple.
I need to show the espece.png when the Payment was "espece" and show the check.png when the Payment was "par check"
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 class:
@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 **/
}
<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" />
paymentImageName where set the appropriate name according to conditional expression.