Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / Java Новый топик    Ответить
 Не могу отобразить картику на странице html  [new]
chron
Member

Откуда:
Сообщений: 225
Здравствуйте.
Не могу отобразить на странице html картинку, полученную из бд.
База Данных postgres 13, способ доступа spring-data-jdbc, среда выполнения idea community.
Картинка jpg корректно хранится в бд и читается в массив byte[]. Я могу её посмотреть на клиенте с пом. контроллера spring как
InputStream is = new ByteArrayInputStream(qlist.get(0).getDataImage());
IOUtils.copy(is, response.getOutputStream()); 

где getDataImage() - это тип byte[]
Но не могу отобразить её в тэгах html, напр., как
<td>
<img src="${el.dataImage}" width="124" height="124" alt=""/>
</td>

где el.dataImage - это то же самое поле класса с типом byte[]

Размер картинок ок. 200kb
пробовал неск. способов, но не смог увидеть картинку. Подскажите, кто знает.
28 апр 21, 09:50    [22315445]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 8254
chron,
F12 нажми
28 апр 21, 09:58    [22315450]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
chron
Member

Откуда:
Сообщений: 225
PetroNotC Sharp,
подсказка строки
src="${el.dataImage}" 

говорит: не удалось загрузить изображение.
28 апр 21, 10:08    [22315455]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 8254
chron,
Скрин дай. Второе - рядом поставь показ статическогого изображения. Тестового в папке аппсервера
28 апр 21, 10:16    [22315460]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
chron
Member

Откуда:
Сообщений: 225
скрин даю.

по поводу "Второе - рядом поставь показ статическогого изображения. Тестового в папке аппсервера" не вполне понятно.
можно подробнее.

К сообщению приложен файл. Размер - 146Kb
28 апр 21, 10:42    [22315474]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 8254
chron,

По шагам
- создать в корне проекта папку images
- кинуть туда png, jpg
- набрать
http....../my.jpg
Должен увидеть в браузере
28 апр 21, 10:54    [22315481]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 8254
chron,
>где el.dataImage - это то же самое поле класса с типом byte[]
= мне кажется нужен тип строка как урл. Где ты и отдаешь байты.
У вади спроси
28 апр 21, 11:01    [22315483]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
chron
Member

Откуда:
Сообщений: 225
PetroNotC Sharp,
файлы с диска я вижу, не могу передать данные byte[] на другую страницу.
идея-то неплохая: взять данные с бд и сразу отправить их по адресу. такой канал передачи. pipeImage.
28 апр 21, 11:06    [22315486]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
Stanislav Bashkyrtsev
Member

Откуда: СПб
Сообщений: 137
chron, ты хочешь бинарные данные встроить в текстовый HTML? Во-первых, судя по потому что EL выражение не заменилось ни на что - возможно эти классы/поля отсутствуют в контексте. Может конечно твой инструмент понимает что бинарный byte[] нельзя встроить в HTML, но че-т сомневаюсь.. И мы плавно переходит ко второй части: обычно src указывать на URL, но если требуется встроить картинку прям в саму разметку, то нужно конвертировать ее в Base64 и добавить content type и пр. перед самими данными.

Сообщение было отредактировано: 28 апр 21, 11:04
28 апр 21, 11:10    [22315490]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
Kachalov
Member

Откуда: Москва
Сообщений: 5817
chron
файлы с диска я вижу, не могу передать данные byte[] на другую страницу.
идея-то неплохая: взять данные с бд и сразу отправить их по адресу. такой канал передачи. pipeImage.

Либо делайте сервлет, который по URL отдает нужную картинку, что то типа:
<img src="/servlet/getImage?123">

либо, если очень хочется именно байты сразу в HTML вкрячить (что увеличивает вес страницы и лишает возможности использовать кэширование изображения в браузере), то:
<img src="data:image/png;base64,здесь_BASE64_данные">
28 апр 21, 11:27    [22315504]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 8254
chron
PetroNotC Sharp,
файлы с диска я вижу, не могу передать данные byte[] на другую страницу.
идея-то неплохая: взять данные с бд и сразу отправить их по адресу. такой канал передачи. pipeImage.
не передавай. Урл передай. Кеш будет работать
28 апр 21, 11:30    [22315505]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
chron
Member

Откуда:
Сообщений: 225
Stanislav Bashkyrtsev, спасибо.
1. конечно, встроить бинарные данные в текст напрямую не получится. но строка
IOUtils.copy(is, response.getOutputStream()); 

срабатывает: печатает картинку.

2. конвертирование в Base64 применялось. Вот закомментированные остатки кода
//String imageBase64 = Base64.getEncoder().encodeToString(qlist.get(0).getDataImage());
//qlist.get(0).setImageBase64(imageBase64);
в это случае вместо строки
<img src="${el.dataImage}" width="124" height="124" alt=""/>

использовалось
<img src="${el.imageBase64}" width="124" height="124" alt=""/>

с тем же результатом.

3. я почему-то ощущаю, что решение - форматирование byte[] и передача нового формата на страницу.
28 апр 21, 11:31    [22315506]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
chron
Member

Откуда:
Сообщений: 225
PetroNotC Sharp
chron
PetroNotC Sharp,
файлы с диска я вижу, не могу передать данные byte[] на другую страницу.
идея-то неплохая: взять данные с бд и сразу отправить их по адресу. такой канал передачи. pipeImage.
не передавай. Урл передай. Кеш будет работать


не понял: а какой url установить в данном случае для значения поля:
src="${el.dataImage}" 
28 апр 21, 11:34    [22315507]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 8254
chron
PetroNotC Sharp
пропущено...
не передавай. Урл передай. Кеш будет работать


не понял: а какой url установить в данном случае для значения поля:
src="${el.dataImage}" 
выше сказали. Строка урл на сервлет или маппинг спринга рест
28 апр 21, 11:36    [22315508]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 8254
chron,
РЕСТ спринга должен отдать картинку просто по урл!

Сообщение было отредактировано: 28 апр 21, 11:30
28 апр 21, 11:37    [22315510]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
chron
Member

Откуда:
Сообщений: 225
Kachalov,
понятно.
Но такое решение, наверное, лучше оставить на крайний случай.
28 апр 21, 11:39    [22315511]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 8254
chron
Kachalov,
понятно.
Но такое решение, наверное, лучше оставить на крайний случай.
какое?
Веб заточен на документы из урл. А не base64
28 апр 21, 11:40    [22315512]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
chron
Member

Откуда:
Сообщений: 225
PetroNotC Sharp,
да, @RestController я здесь не использовал. буду попробовать.
28 апр 21, 11:43    [22315515]     Ответить | Цитировать Сообщить модератору
 Re: Не могу отобразить картику на странице html  [new]
chron
Member

Откуда:
Сообщений: 225
решение найдено. надеюсь, кому нибудь это тоже пригодится:
1. в html нужно установить ссылку на путь контроллера
<img th:src="@{/images/{id}(id=${el.idImage})}"/>


2. этот путь с get запросом таков:
@GetMapping("/images/{id}")


3. а сам контроллер предельно прост:
    public void showImage(@PathVariable String id, HttpServletResponse response) throws IOException {
        response.setContentType("image/jpeg");
        List<Image> qlist = qservice.imagelist(1, 12);  // (1, 12) - это мои отладочные данные

        InputStream is = new ByteArrayInputStream(qlist.get(Integer.parseInt(id)).getDataImage());
        IOUtils.copy(is, response.getOutputStream());
    }


К сообщению приложен файл. Размер - 74Kb
28 апр 21, 22:03    [22315991]     Ответить | Цитировать Сообщить модератору
Все форумы / Java Ответить