Как вывести картинку из бд в Spring?

Question

[DeNissss4444]

Ребят понимаю что глупый вопрос и в интернете можно найти примеры как это делать, но в основном я находил индусов с непонятным кодом...У меня есть бд блога на локалхосте я туда успешно гружу всю информацию для поста (название, дату , текст и картинку).Но я вообще никак не могу понять как от туда её выводить.Может кто-то не полениться и покажет хоть часть кода или саму идею... Вот у меня контроллер где я гружу в бд информацию

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

Код работает и все успешно добавляет в бд в том числе и изображение. Подскажите как теперь вывести его с помощью thymeleaf в тег img?

Answer 1

[Орхан Гасанлы]

Добрый день.

У меня есть бд блога на локалхосте я туда успешно гружу всю информацию для поста (название, дату , текст и картинку)

Картинка не должна хранится в БД. Вы конечно можете хранить картинку в БД в blob, но не нужно! Лучше в БД храните например, путь до картинки, а еще лучше путь можно сохранить в properties или yml, а в БД хранить название картинки.

Далее небольшой совет:

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

Если у вас более 4-х аргументов, то лучше собрать его в Dto. Это также позволит вам проводить валидацию через javax validation.

А теперь, ответ на ваш вопрос: чтобы вывести картинку хранимую в БД необходимо массив байт, который вы сохранили в БД конвертировать в base64 и закинуть в тег img.

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

Вот, тут дан похожий ответ: https://stackoverflow.com/questions/26400994/how-t...

Через контроллер добавляем

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

Выводим в шаблонизаторе
<img src="data:image/jpeg;base64,${image}" />

Если решите реализовать загрузку файла, как я указал в самом начале своего ответа, то для начала можете прочитать эту статью - https://www.callicoder.com/spring-boot-file-upload...

Comments

[DeNissss4444]

А можете подсказать почему так плохо хранить картинку в бд виде байтов а потом так её выводить?

[Орхан Гасанлы]

DeNissss4444, потому что со временем по мере добавления статей вес БД будет разрастаться. А если у статьи будут несколько картинок, то представляете вес одной записи?

[DeNissss4444]

Орхан Гасанлы, я правильно понял, что в Spring проектах особенно в крупных все картинки храниться не в базе а в различных облачных хранилищах, а в самой базе максимум храниться путь для той или иной картинки?

[Орхан Гасанлы]

DeNissss4444, да. Но это касается не только Spring проектов, а вообще всех фреймворкoв, cms & cmf

[AXAXAXAXAXAXA]

Орхан Гасанлы, что значит repository.getImage()? у меня просто такое есть и не работает

Iterable<Photo> photos = photoRepository.findAll();
  model.addAttribute("fotos", photos);

[Орхан Гасанлы]

AXAXAXAXAXAXA, омгу порекомендовать создать отдельный вопрос и выложить свои сниппеты там. Пока не очень понятно чего вы хотите и что именно у вас не получается

[AXAXAXAXAXAXA]

Орхан Гасанлы, https://qna.habr.com/q/1211934