Вывод изображения на странице?

Question

[Starvings]

День добрый.
Пытаюсь разобраться, как вывести изображение на страницу, но встаю в тупик.

Два кейса:

1. Ссылка на изображение на сторонний ресурс: https://notur.my.local/Photo/yh43tk.jpg?size=200_200, где yh43tk.jpg - переменное значений и для каждого случая будет свой. Как правильно прописать ссылку на изображение?

2. В БД хранится информация по объектам, в т.ч. картинка в Base64

@GetMapping("/lists")
    public String list(Model model) {
        Iterable<Trackable> trackables = trackableRepository.findAll();
        model.addAttribute("trackables", trackables);
        return "lists";
    }

на странице пытаюсь вывести

<div th:each="el : ${trackables}" class="alert alert-info mt-2">
    <img src="data:image/jpeg;base64,${el.Trackable_photo}" />
//другие параметры
//другие параметры
//другие параметры
//другие параметры
//другие параметры
</div>

но делаю что-то не так, изображение не подтягивается. Подскажите, пожалуйста, как исправить?

Answer 1

[Дмитрий Кинаш]

1) для начала открой исходный код страницы и проверь, что там именно base64, а не бинарник картинки выведен.
2) внешний ресурс по запрос точно возвращает тело картинки, а не HTML-страничку с вариантами встраивания?
3) если картинка на внешнем ресурсе, то зачем выводить на страницу ее закодированное в base64 содержимое (т.е. на треть больше оригинала), если можно оставить прямую ссылку?

Comments

[Starvings]

Это два разных кейса.
1. по ссылке - это прямое изображение, если скопировать - вставить в виде урла в браузере - открывается нужная пикча. Но не понимаю, как собрать конструктор. Как я думаю должно быть: "https://notur.my.local/Photo/" + переменная + ".jpg?size=200_200" т.е. ссылку надо разбить на составные части: статичная часть + динамическая часть + статичная часть. Динамика, например: src=https://notur.my.local/Photo/ + ${el.Trackable_id} + .jpg?size=200_200 alt="Фото" width="150" height="150". Как не пытался экранировать кавычками, результат нулевой.

2. Второй кейс отдельный, это другой источник изображений и они хранятся в base64, вариантов других нет, кроме как забирать из таблицы и передавать на страницу

[сергей кузьмин]

Starvings, как исправить?
напишите тесты посмотрите что приходит исправьте что неправильно и все заработает