i have a question regarding how to display images stored in a database, i tried a lot of solutions, but nothing seems to help.
I can store images, however displaying them has proven to be hard.
I have no idea how to fix the issue
Any help would be appreciated!!!
owner.html
<code><!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Owners</title>
</head>
<body>
<h1>Owners</h1>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profile Picture</th>
</tr>
</thead>
<tbody>
<!-- Iterate over each owner -->
<tr th:each="owner : ${owners}">
<td th:text="${owner.name}"></td>
<td th:text="${owner.age}"></td>
<td>
<img th:src="|data:image/png;base64,${#strings.toString(owner.profilePicture)}|" alt="Profile Picture"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Owners</title>
</head>
<body>
<h1>Owners</h1>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profile Picture</th>
</tr>
</thead>
<tbody>
<!-- Iterate over each owner -->
<tr th:each="owner : ${owners}">
<td th:text="${owner.name}"></td>
<td th:text="${owner.age}"></td>
<td>
<img th:src="|data:image/png;base64,${#strings.toString(owner.profilePicture)}|" alt="Profile Picture"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</code>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Owners</title>
</head>
<body>
<h1>Owners</h1>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profile Picture</th>
</tr>
</thead>
<tbody>
<!-- Iterate over each owner -->
<tr th:each="owner : ${owners}">
<td th:text="${owner.name}"></td>
<td th:text="${owner.age}"></td>
<td>
<img th:src="|data:image/png;base64,${#strings.toString(owner.profilePicture)}|" alt="Profile Picture"/>
</td>
</tr>
</tbody>
</table>
</body>
</html>
OwnerController.java
<code>package com.gestion.g04.controllers;
import com.gestion.g04.models.Owner;
import com.gestion.g04.services.OwnerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.List;
@Controller
public class OwnerController {
@Autowired
private OwnerService ownerService;
@GetMapping("/owners")
public String getAllOwners(Model model) {
List<Owner> owners = ownerService.getAllOwners();
model.addAttribute("owners", owners);
return "owners";
}
@GetMapping("/add-owner")
public String showOwnerForm(Model model) {
model.addAttribute("owner", new Owner());
return "add-owner";
}
@PostMapping("/add-owner")
public String addOwner(@ModelAttribute Owner owner, @RequestParam("file") MultipartFile file) {
try {
if (file.isEmpty()) {
return "redirect:/add-owner?error=file";
}
// Convert the file to a byte array and save it in the owner entity
byte[] picture = file.getBytes();
owner.setProfilePicture(picture);
ownerService.addOwner(owner.getName(), owner.getAge(), file);
} catch (IOException e) {
e.printStackTrace();
return "redirect:/add-owner?error=file";
}
return "redirect:/owners";
}
}
</code>
<code>package com.gestion.g04.controllers;
import com.gestion.g04.models.Owner;
import com.gestion.g04.services.OwnerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.List;
@Controller
public class OwnerController {
@Autowired
private OwnerService ownerService;
@GetMapping("/owners")
public String getAllOwners(Model model) {
List<Owner> owners = ownerService.getAllOwners();
model.addAttribute("owners", owners);
return "owners";
}
@GetMapping("/add-owner")
public String showOwnerForm(Model model) {
model.addAttribute("owner", new Owner());
return "add-owner";
}
@PostMapping("/add-owner")
public String addOwner(@ModelAttribute Owner owner, @RequestParam("file") MultipartFile file) {
try {
if (file.isEmpty()) {
return "redirect:/add-owner?error=file";
}
// Convert the file to a byte array and save it in the owner entity
byte[] picture = file.getBytes();
owner.setProfilePicture(picture);
ownerService.addOwner(owner.getName(), owner.getAge(), file);
} catch (IOException e) {
e.printStackTrace();
return "redirect:/add-owner?error=file";
}
return "redirect:/owners";
}
}
</code>
package com.gestion.g04.controllers;
import com.gestion.g04.models.Owner;
import com.gestion.g04.services.OwnerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.List;
@Controller
public class OwnerController {
@Autowired
private OwnerService ownerService;
@GetMapping("/owners")
public String getAllOwners(Model model) {
List<Owner> owners = ownerService.getAllOwners();
model.addAttribute("owners", owners);
return "owners";
}
@GetMapping("/add-owner")
public String showOwnerForm(Model model) {
model.addAttribute("owner", new Owner());
return "add-owner";
}
@PostMapping("/add-owner")
public String addOwner(@ModelAttribute Owner owner, @RequestParam("file") MultipartFile file) {
try {
if (file.isEmpty()) {
return "redirect:/add-owner?error=file";
}
// Convert the file to a byte array and save it in the owner entity
byte[] picture = file.getBytes();
owner.setProfilePicture(picture);
ownerService.addOwner(owner.getName(), owner.getAge(), file);
} catch (IOException e) {
e.printStackTrace();
return "redirect:/add-owner?error=file";
}
return "redirect:/owners";
}
}
OwnerService.java
<code>package com.gestion.g04.services;
import com.gestion.g04.models.Owner;
import com.gestion.g04.repositories.OwnerRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.StringUtils;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.List;
import java.util.Objects;
@Service
public class OwnerService {
@Autowired
private OwnerRepository ownerRepository;
public List<Owner> getAllOwners() {
return ownerRepository.findAll();
}
@Transactional
public void addOwner(String name, int age, MultipartFile profilePicture) throws IOException {
Owner owner = Owner.builder()
.name(name)
.age(age)
.build();
if (profilePicture != null && !profilePicture.isEmpty()) {
String fileName = StringUtils.cleanPath(Objects.requireNonNull(profilePicture.getOriginalFilename()));
owner.setProfilePicture(profilePicture.getBytes());
owner.setProfilePictureName(fileName);
}
ownerRepository.save(owner);
}
}
</code>
<code>package com.gestion.g04.services;
import com.gestion.g04.models.Owner;
import com.gestion.g04.repositories.OwnerRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.StringUtils;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.List;
import java.util.Objects;
@Service
public class OwnerService {
@Autowired
private OwnerRepository ownerRepository;
public List<Owner> getAllOwners() {
return ownerRepository.findAll();
}
@Transactional
public void addOwner(String name, int age, MultipartFile profilePicture) throws IOException {
Owner owner = Owner.builder()
.name(name)
.age(age)
.build();
if (profilePicture != null && !profilePicture.isEmpty()) {
String fileName = StringUtils.cleanPath(Objects.requireNonNull(profilePicture.getOriginalFilename()));
owner.setProfilePicture(profilePicture.getBytes());
owner.setProfilePictureName(fileName);
}
ownerRepository.save(owner);
}
}
</code>
package com.gestion.g04.services;
import com.gestion.g04.models.Owner;
import com.gestion.g04.repositories.OwnerRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.StringUtils;
import org.springframework.web.multipart.MultipartFile;
import java.io.IOException;
import java.util.List;
import java.util.Objects;
@Service
public class OwnerService {
@Autowired
private OwnerRepository ownerRepository;
public List<Owner> getAllOwners() {
return ownerRepository.findAll();
}
@Transactional
public void addOwner(String name, int age, MultipartFile profilePicture) throws IOException {
Owner owner = Owner.builder()
.name(name)
.age(age)
.build();
if (profilePicture != null && !profilePicture.isEmpty()) {
String fileName = StringUtils.cleanPath(Objects.requireNonNull(profilePicture.getOriginalFilename()));
owner.setProfilePicture(profilePicture.getBytes());
owner.setProfilePictureName(fileName);
}
ownerRepository.save(owner);
}
}
Chatgpt couldn’t help , i tried stack overflow as well
New contributor
LEON is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.