Apa yang saya coba lakukan adalah menampilkan gambar yang diambil dari database Mysql ke halaman web menggunakan informasi kartu thymeleaf.
Tetapi alih-alih mendapatkan gambar di kartu dengan meneruskan url(http://localhost:8080/showapplication/v2) apa yang saya dapatkan di browser sebagai respons:-
Saya tidak tahu apa yang saya lakukan salah. Tolong bantu saya untuk mencapai hasil yang diinginkan.
Kelas pengontrol:-
@Controller
@RequestMapping("/showapplication")
public class ShowImageController {
@Autowired
private ImageRepository imageRepository;
@Autowired
private ImageService imageService;
@GetMapping("/v2")
public String ShowAllImages(Model model){
List<ImageEntity> allImages=imageService.RetriveAllImages();
model.addAttribute("listofimages",allImages);
return "showimage";
}
}
Kelas layanan:-
@Service
public class ImageService {
@Autowired
private ImageRepository imageRepository;
public void uploadtodb(MultipartFile file){
ImageEntity imageEntity=new ImageEntity();
try {
imageEntity.setImage(file.getBytes());
imageEntity.setFiletype(file.getContentType());
imageEntity.setImagename(file.getOriginalFilename());
imageRepository.save(imageEntity);
} catch (IOException e) {
e.printStackTrace();
}
}
public List<ImageEntity> RetriveAllImages()
{
List<ImageEntity> imagesEntities;
return imagesEntities=imageRepository.findAll();
}
}
Kode HTML:-
<!DOCTYPE html>
<html lang="en" xmlns:th="html://thymeleaf.org">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Aguafina Script' rel='stylesheet' >
<link href='https://fonts.googleapis.com/css?family=Alegreya SC' rel='stylesheet'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>allimages</title>
</head>
<body>
<br>
<br>
<div class="container" >
<div class="row">
<div class="col-xl-3" th:each="allimages, istat : ${listofimages}">
<div class="card" style="width: 15rem;">
<img class="card-img-top" th:src="${allimages.image}" alt="Card image cap">
<div class="card-body">
<p class="card-title" th:text = "${allimages.imagename}"></p>
<hr>
<p class="card-text" th:text = "${allimages.filetype}"></p>
</div>
</div>
<span th:if="${istat.count % 4 == 0}"><br></span>
</div>
</div>
</div>
</body>
</html>
Terima kasih sebelumnya.. Bantuan apa pun akan sangat dihargai..
