render photo from database on thymeleaf

Author: Csaba79-coder

src/main/java/com/csaba79coder/littersnap/view/LitterViewController.java

@@ -7,9 +7,15 @@
 import com.csaba79coder.littersnap.util.Mapper;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
-import org.springframework.web.bind.annotation.*;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.ModelAttribute;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.multipart.MultipartFile;
 
+import java.util.Base64;
 import java.util.List;
 import java.util.NoSuchElementException;
 import java.util.UUID;
@@ -40,7 +46,6 @@ public String getAllLitters(Model model) {
 
  @GetMapping("/{id}")
  public String getLitterById(@PathVariable("id") UUID id, Model model) {
-
  try {
  LitterModel litter = litterService.getLitterById(id);
  model.addAttribute("id", litter.getId());
@@ -51,7 +56,11 @@ public String getLitterById(@PathVariable("id") UUID id, Model model) {
  model.addAttribute("country", litter.getAddress().getCountry());
  model.addAttribute("postcode", litter.getAddress().getPostCode());
  model.addAttribute("description", litter.getDescription());
- model.addAttribute("image", litter.getImage());
+
+ // Convert the byte array to a base64 encoded string
+ String base64Image = Base64.getEncoder().encodeToString(litter.getImage());
+ model.addAttribute("image", base64Image);
+
  model.addAttribute("status", litter.getStatus());
  model.addAttribute("view", "litter_details");
  return "welcome";
@@ -64,7 +73,11 @@ public String getLitterById(@PathVariable("id") UUID id, Model model) {
  @GetMapping("/create")
  public String showAddLitterForm(Model model) {
  try {
- model.addAttribute("litter", new LitterCreateOrModifyModel());
+ LitterCreateOrModifyModel litterModel = new LitterCreateOrModifyModel();
+
+ // Set any other necessary properties in the litterModel object
+
+ model.addAttribute("litter", litterModel);
  return "litter_add_form";
  } catch (NoSuchElementException e) {
  model.addAttribute("errorMessage", e.getMessage());
@@ -75,7 +88,8 @@ public String showAddLitterForm(Model model) {
  @PostMapping("/create")
  public String addNewLitter(@ModelAttribute("litter") LitterCreateOrModifyModel litterModel,
  @ModelAttribute("address") Address address,
- @RequestParam("file") MultipartFile file,Model model) {
+ @RequestParam("file") MultipartFile file,
+ Model model) {
  try {
  litterService.addNewLitter(litterModel, address, file);
  return "redirect:/thy/litter";

src/main/resources/templates/litter_details.html

@@ -26,7 +26,7 @@ <h4><span class="text-muted">Description:</span></h4>
  <p><span th:text="${description}"></span></p>
 
  <h4><span class="text-muted">Image:</span></h4>
- <p><span th:text="${image}"></span></p>
+ <img th:src="@{'data:image/png;base64,' + ${image}}" alt="Litter Image" />
 
  <h4><span class="text-muted">Status:</span></h4>
  <p><span th:text="${status}"></span></p>

src/main/resources/templates/welcome.html

@@ -58,7 +58,7 @@
  <div th:if="~{${view}}" class="row m-4">
  <div class="col">
  <!-- Dynamic Content Placeholder -->
- <div th:include="~{${view}}"></div>
+ <div th:insert="~{${view}}"></div>
 
  </div>
  </div>