Блог

Главная - Вопросы по программированию - Отображение изображения с сервера spring boot REST

Отображение изображения с сервера spring boot REST

#html #file #spring-boot

#HTML #файл #spring-загрузка

Вопрос:

У меня есть сервер Spring Boot REST.

Контроллер возвращает сохраненное изображение как :

 @ResponseBody ResponseEntity<Resource> myController(@PathVariable("id") final Long id){
   ...
}

Как мне отобразить его на моей HTML-странице?

 <html>
  ...
     <img src="???"/>
  ...
</html>

Я могу добавить код JQUERY / AJAX, который будет извлекать изображение для меня таким образом, но что мне тогда с ним делать?

Комментарии:

1. Невозможно с обычной HTML-страницей. Вам нужно что-то, что использует вашу конечную точку Rest, например Javascript (например, jQuery) на стороне клиента или движок шаблонов, такой как Thymeleaf, на стороне сервера. Сам по себе HTML ничего не может сделать с вашей конечной точкой REST.

2. Я добавлю вызов jQuery / Ajax, чтобы получить изображение таким образом. Что тогда?

3. посмотрите на этот пример: mkyong.com/spring-boot/spring-boot-ajax-example

Ответ №1:

Я, наконец, нашел решение по этим ссылкам :

https://o7planning.org/en/11765/spring-boot-file-download-example
https://community .liferay.com/forums/-/message_boards/message/26404099

1) Я прочитал изображение как массив байтов

2) Я должен закодировать его в Base64

Я использую Base64.GetEncoder().encodeToString(my-image-bytes).getBytes()

3) Я возвращаю его как ByteArrayResource :

 return ResponseEntity.ok()
                .contentType(MediaType.parseMediaType("application/octet-stream"))
                .header(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=""   name   """)
                .contentLength(data.length)
                .body(new ByteArrayResource(data));

4) на моей странице я загружаю его как изображение следующим образом :

 $.ajax({
                url: 'url-to-get-image-api-controller',
                type: 'GET',
                statusCode:{
                    200: function(data){
                        $("#thumb1").html('<img src="data:image/jpg;base64,'   data   '" />');
                    }
                }
            });

Это работает.