0

Я собираюсь деплоить приложение на heroku и для меня легкий выход это хранить изображения в БД. Но у меня не получается отобразить картинку, которую я сохраняю в БД.

Одна из ошибок которая отображется:

freemarker.core.NonStringOrTemplateOutputException: For "${...}" content: Expected a string or something automatically convertible to string (number, date or boolean), or "template output" , but this has evaluated to a sequence (wrapper: f.t.SimpleSequence):
==> message.img  [in template "main.ftlh" at line 69, column 89]

----
FTL stack trace ("~" means nesting-related):
    - Failed at: ${message.img}  [in template "main.ftlh" at line 69, column 87]
    ~ Reached through: #nested  [in template "parts/common.ftlh" in macro "page" at line 17, column 5]
    ~ Reached through: @c.page  [in template "main.ftlh" at line 3, column 1]
----

так я пытаюсь отобразить картинку в main.ftl:

<#if message.img??>
   <img class="card-img-top" src="/img/${message.img}" alt="Card image cap" style="width:100%">
</#if>

Entity выглядит следующим образом:

@Entity
public class Message {
...код...

@Lob
    private byte[] img;

...код...
}

В контролере я получаю файл с помощью:

@PostMapping("/main")
    public String add(
            @AuthenticationPrincipal User user,
            @Valid Message message,
            BindingResult bindingResult,
            Model model,
            @RequestParam("file")MultipartFile file
    ) throws IOException {
        message.setAuthor(user);

        if(bindingResult.hasErrors()) {
            Map<String, String> errorsMap = ControllerUtils.getErrors(bindingResult);

            model.addAttribute("message", message);
            model.mergeAttributes(errorsMap);
        } else {
            if (file != null && !file.getOriginalFilename().isEmpty()) {
                message.setImg(file.getBytes());
            }

            model.addAttribute("message", null);
            messageRepo.save(message);
        }

        Iterable<Message> messages = messageRepo.findAll();
        model.addAttribute("messages",messages);
        return "main";
    }

Прошу помощи и указать на ошибки. Понимаю, что это путь src="/img/${message.img}", но не знаю, как отобразить картинку напрямую из БД. Как мне лучше сделать

8
  • Ну а прилепить не получается?
    – Roman C
    5 дек 2021 в 16:08
  • @Roman C Прилепить что?
    – Lycurg
    5 дек 2021 в 16:16
  • ${message.img} к <img>
    – Roman C
    5 дек 2021 в 16:28
  • все равно не совсем понимаю. <img class="card-img-top" src="${message.img}">. Так я пробовал. Не получалось, по другому не знаю как сделать
    – Lycurg
    5 дек 2021 в 16:32
  • Так делать нельзя, т.к. FM не понимает значение внутри ${} и все что находится внутри должно быть типа стринг.
    – Roman C
    5 дек 2021 в 16:39

2 ответа 2

1

В чем проблема?

Атрибут src тега <img/> предназначен для того, чтобы указывать в нём ссылку на изображение.
Это значит, что браузер может получить строку из этого атрибута и используя данную строку как адрес, браузер может отправить HTTP запрос, на который ожидает получить 200-ый HTTP ответ с содержимым картинки в теле ответа.

Нельзя просто взять и указать

src="/img/${message.img}"

и надеяться на то, что приложение само за вас настроит маршрутизацию и отдачу контента с сервера.

Вы просто пытаетесь вставить массив байтов в верстку.
Эти данные будут в лучшем случае преобразованы в строку.
Как будет выглядеть подобная строка, вы можете поинтересоваться открыв любое изображение в блокноте.

Спойлер: нет!
судя по исключению FreeMaker не смог автоматически конвертировать массив байтов в строку
Expected a string or something automatically convertible to string (number, date or boolean)

Что делать?

1. Нужно реализовать отдачу изображений

Для этого добавьте в контроллер метод, который получает из БД сообщение и возвращает его содержимое в виде HTTP-ответа.

Т.к. нам нужно будет искать изображения в БД, было бы неплохо как-то получать идентификатор записи из запроса.

Для этого:

  • укажите в шаблоне пути плейсхолдер {id}
  • для перехвата значения из шаблона пути объявите параметр Long id и пометьте его аннотацией @PathVariable("id") для того чтобы связать его с плейсхолдером
  • пометьте метод контроллера аннотацией @ResponseBody, чтобы использовать возвращаемое методом значение в качестве тела HTTP ответа
  • для того чтобы спринг сформировал корректные HTTP-заголовки, соответствующие типу отдаваемого контента, укажите в аннотации @GetMapping атрибут produces со значением MediaType.IMAGE_PNG_VALUE для PNG или MediaType.IMAGE_JPEG_VALUE для JPEG изображений
  • с помощью репозитория получите из БД запись по идентификатору
  • обязательно проверьте наличие записи в результатах поиска и наличие содержимого изображения в записи
  • верните содержимое изображения, в противном случае выкиньте исключение с 404 ошибкой
@ResponseBody
@GetMapping(value = "/img/messages/{id}.png", produces = MediaType.IMAGE_PNG_VALUE)
public byte[] img(@PathVariable("id") Long id, HttpServletRequest request) {
    Optional<Message> messageSearchResult = messageRepo.findById(id);
    if(messageSearchResult.isPresent()) {
        Message message = messageSearchResult.get();
        if (message.getImg() != null  && message.getImg().length > 0){
            return message.getImg();
        }
    }
    // если выполнение дошло до данной строки, значит ничего не было найдено
    // выбрасываем 404
    throw new ResponseStatusException(HttpStatus.NOT_FOUND, "Image Not Found");
}

Формируем и указываем в шаблоне корректную ссылку на изображение

Далее указываем в шаблоне ссылку, соответствующую шаблону пути из вышеуказанного метода и пробрасываем в него идентификатор сообщения

<#if message.img??>
   <img class="card-img-top" src="/img/messages/${message.id}.png" alt="Card image cap" style="width:100%">
</#if>
1
  • Спасибо большое, ваш ответ навел меня на правильное решение! К сожалению, просто добавив ваш код у меня ничего не вышло, но я посидел два часа, чуть подкоректировал, что то покрутил, погуглил и теперь картинки отображаются. В "ответ на собственный вопрос" добавлю, что получилось. Главное вы донесли основную мысль) как я понял, нужно поместить картинку в Servlet было и ссылаться на нее во view. Я даже не знал что так можно сделать) Огромная благодраность)
    – Lycurg
    7 дек 2021 в 17:56
0

В контролере метод чуть отредоктирован:

@ResponseBody
@GetMapping(value = "/img/messages/{name}", produces = MediaType.IMAGE_JPEG_VALUE)
public byte[] img(@PathVariable("name") String name, HttpServletResponse response) throws IOException {

    Optional<Message> messageSearchResult = messageRepo.findByFilename(name);

    if(messageSearchResult.isPresent()) {
        Message message = messageSearchResult.get();
        if (message.getImg() != null  && message.getImg().length > 0){
            byte[] img = message.getImg();

            response.setContentType("image/jpeg");
            response.setContentLength(img.length);
            response.getOutputStream().write(img);

            return message.getImg();
        }
    }
    
    throw new ResponseStatusException(HttpStatus.NOT_FOUND, "Image Not Found");
}

Во view

<#if message.filename??>
    <img class="card-img-top" src="img/messages/${message.filename}" alt="Card image cap" style="width:100%">
</#if>

Ну и еще в application.properies добавить нужно было, чтобы картинка загружалась:

spring.datasource.hikari.auto-commit=false

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.