How to display an image from a database in Spring?

Question

Java

Guys, I understand that it’s a stupid question and you can find examples on the Internet on how to do it, but basically I found Indians with incomprehensible code ... I have a blog database on localhost, I successfully upload all the information for the post there (name, date, text and picture ). But I can’t figure out how to display it from there. Maybe someone is not too lazy and will show at least part of the code or the idea itself ... Here I have a controller where I load information into the database

@PostMapping("addArticle")
    public String postAddArticle(@AuthenticationPrincipal User user, Date timeArticle, @RequestParam String title, String author,
                                 @RequestParam String anons, @RequestParam String text,
                                 @RequestParam("file") MultipartFile file, Model model) {
        Byte[] bArray = null;

        author = user.getUsername();

        Calendar calendar = Calendar.getInstance();
        timeArticle = calendar.getTime();

        try {
            bArray = new Byte[file.getBytes().length];
            int i = 0;
            for(byte b : file.getBytes()){
                bArray[i++] = b;
            }
        } catch (IOException e) {
            e.printStackTrace();
        }

        Post post = new Post(title,timeArticle, author, anons, text, bArray );
        post.setTitle(title);
        post.setTimeArticle(timeArticle);
        post.setAuthor(author);
        post.setAnons(anons);
        post.setText(text);
        post.setImage(bArray);
        postRepository.save(post);

        return "redirect:/adminPage";
    }

The code works and everything is successfully added to the database, including the image. Tell me how now to display it using thymeleaf in the img tag?

Answer 1

Good afternoon.

I have a blog database on localhost, I successfully load all the information for the post there (name, date, text and image)

The image should not be stored in the database. Of course, you can store the image in the database as a blob, but you don't have to! It is better to store in the database, for example, the path to the image, and even better, the path can be saved in properties or yml, and the name of the image can be stored in the database.
Here's a little tip:

postAddArticle(@AuthenticationPrincipal User user, Date timeArticle, @RequestParam String title, String author,
                                 @RequestParam String anons, @RequestParam String text,
                                 @RequestParam("file") MultipartFile file, Model model)

If you have more than 4 arguments, then it is better to collect it in Dto. This will also allow you to validate via javax validation.
And now, the answer to your question: to display an image stored in the database, you need to convert the byte array that you saved in the database to base64 and throw it into the img tag.

<img src="data:image/jpeg;base64,[тут_код_картинки_в_base64]">

Here, a similar answer is given here: https://stackoverflow.com/questions/26400994/how-t... We
add via the controller

byte[] encodeBase64 = Base64.encode(repository.getImage());
String base64Encoded = new String(encodeBase64, "UTF-8");
model.addObject("image", base64Encoded );

Output in the template engine
<img src="data:image/jpeg;base64,${image}" />
If you decide to implement file upload, as I indicated at the very beginning of my answer, then you can first read this article - https://www.callicoder.com/spring-boot-file-upload...