Почему невозможно отобразить изображение на веб-странице с помощью тимлиста и весенней загрузки?

То, что я пытаюсь сделать, это отображение изображений, извлеченных из базы данных Mysql, на веб-страницу с использованием тимелеафа, сообщающего о картах.

Но вместо того, чтобы получать изображения в карточках, передавая URL (http://localhost:8080/showapplication/v2), что я получаю в браузере в качестве ответа: -

введите здесь описание изображения

Я не знаю, что я делаю неправильно. Пожалуйста, помогите мне добиться желаемого результата.

Класс контроллера:-

@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";
    }
}

Класс обслуживания:-

@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();
    }
}

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>

Заранее спасибо .. Любая помощь будет высоко оценена ..


spring-boot thymeleaf
person deep    schedule 10.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Измените свой HTML на:

<img class="card-img-top" th:src="@{allimages.image}" alt="Card image cap">

Обратите внимание, что в этом случае мы используем @ вместо $ в <img th:src>. Дополнительные сведения см. в этой статье.

person Kovsharov    schedule 11.09.2020
comment
извините, не работает..Кстати, спасибо за внимание - person deep; 11.09.2020