Вывод изображения на странице?
День добрый.
Пытаюсь разобраться, как вывести изображение на страницу, но встаю в тупик.
Два кейса:
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"; } |
@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> |
<div th:each="el : ${trackables}" class="alert alert-info mt-2"> <img src="data:image/jpeg;base64,${el.Trackable_photo}" /> //другие параметры //другие параметры //другие параметры //другие параметры //другие параметры </div>
но делаю что-то не так, изображение не подтягивается. Подскажите, пожалуйста, как исправить?
Дополнительно:
Ответы:
1) для начала открой исходный код страницы и проверь, что там именно base64, а не бинарник картинки выведен.
2) внешний ресурс по запрос точно возвращает тело картинки, а не HTML-страничку с вариантами встраивания?
3) если картинка на внешнем ресурсе, то зачем выводить на страницу ее закодированное в base64 содержимое (т.е. на треть больше оригинала), если можно оставить прямую ссылку?
- Это два разных кейса.
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, как исправить?
напишите тесты посмотрите что приходит исправьте что неправильно и все заработает
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы вывести изображение на странице веб-сайта, вам необходимо использовать тег
. Этот тег позволяет вставить изображение на страницу, указав путь к файлу изображения в атрибуте src.
Пример использования тега
:
<img src="путь_к_изображению.jpg" alt="Описание изображения">
В данном примере:
- "путь_к_изображению.jpg" - это путь к файлу изображения на сервере. Обычно это относительный путь от корневой директории сайта или полный URL до изображения.
- "Описание изображения" - это альтернативный текст, который будет отображаться в случае, если изображение не может быть загружено или для пользователей со слабым зрением.
Вы также можете добавить другие атрибуты к тегу
, такие как width и height для указания размеров изображения, или использовать CSS для стилизации изображения.
Если вам нужно вывести изображение с использованием PHP, вы можете вставить PHP-код в HTML-разметку, чтобы динамически формировать путь к изображению:
<img src="" alt="Описание изображения">
Убедитесь, что путь к изображению указан правильно и что файл изображения доступен для загрузки на сервере. После этого изображение должно успешно отобразиться на странице веб-сайта.