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

Ссылка скопирована
1 ответ

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

Два кейса:

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, как исправить?
    напишите тесты посмотрите что приходит исправьте что неправильно и все заработает
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Роман IT Ответ

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

Пример использования тега :

<img src="путь_к_изображению.jpg" alt="Описание изображения">

<img src="путь_к_изображению.jpg" alt="Описание изображения">

В данном примере:
- "путь_к_изображению.jpg" - это путь к файлу изображения на сервере. Обычно это относительный путь от корневой директории сайта или полный URL до изображения.
- "Описание изображения" - это альтернативный текст, который будет отображаться в случае, если изображение не может быть загружено или для пользователей со слабым зрением.

Вы также можете добавить другие атрибуты к тегу , такие как width и height для указания размеров изображения, или использовать CSS для стилизации изображения.

Если вам нужно вывести изображение с использованием PHP, вы можете вставить PHP-код в HTML-разметку, чтобы динамически формировать путь к изображению:

 
&lt;img src=&quot;" alt="Описание изображения"&gt;

&lt;img src=&quot;" alt="Описание изображения"&gt;

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно