Как указать фоновое изображение с помощью Thymeleaf?
Я изучаю весенний сапожок с тимьяном Я сохранил изображение профиля объекта пользователя в файловой системе, и только URL-адрес изображения является частью объекта User, сохраняемого в базе данных.
Я добавил в модель name и dpurl, чтобы получить к ней доступ из шаблона.
@GetMapping("/profile")
public String profileController(@AuthenticationPrincipal User activeUser, Model model) {
model.addAttribute("name", activeUser.getName());
model.addAttribute("dpurl", activeUser.getDpURL());
return "profile";
}
Я могу получить доступ к name из шаблона с помощью th:text = "${name}"
Однако я не могу указать фоновое изображение с помощью тимелеафа, как это
<div id = "dp-container" th:style = "'background-image: url(' + @̣{dpurl} + ');'" >
это приводит к ошибке Could not parse as expression: "'background-image: url(' + @̣{dpurl} + ');'"
Обновить
Поменял вот так
<div id = "dp-container" th:style = "'background-image:url(' + @{dpurl} + ');'">
Теперь я не получаю никаких сообщений об ошибках, но фоновое изображение все еще не отображается.
Как указать фоновое изображение с помощью Thymeleaf?
Ответы 3
Вероятно, это должно выглядеть так:
<div id = "dp-container" th:style = "'background-image:url(' + ${dpurl} + ');'">
Но это зависит от того, что содержит dpurl. Вам действительно нужно использовать @{...}? Тогда вам следует использовать @{${dpurl}}.
Чтобы отладить это, вы должны посмотреть на источник. он также покажет, что разрешают ваши выражения.
dpurl содержит полный URL-адрес изображения в файловой системе. Можно ли получить доступ к таким файлам на диске из веб-приложения? Я создал простую статическую html-страницу только с элементом <img>, и его атрибут src содержал полный URL-адрес изображения на диске, он работал, но когда я переместил его в каталог static веб-приложения, изображение не отображалось вверх?
Вы помещаете изображение в статическую папку, но не видите его. Как выглядит сгенерированный атрибут стиля на доставленной html-странице?
@Flocke Все работает нормально, кроме изображения .. Я предполагаю, что проблема в том, что изображение находится в каталоге, который не является частью структуры проекта .. Не могут размещенные веб-страницы получить доступ к файлам в локальной файловой системе вне дирекции проекта?
@Arjun: Да, локально! Вы можете открывать каждый отдельный файл с вашего локального компьютера (windows) в браузере на том же компьютере, это зависит только от прав доступа. Но вы не можете передать это изображение клиентам в Интернете, потому что их браузер не имеет доступа к этому файлу. ... Spring boot определенно должен добавить статическую папку в путь. Таким образом, th: style "| background-image: url ($ {imgPath}); |" должен работать, если imgPath выглядит как "/image/myImage.jpg". Я не думаю, что тебе здесь нужен @.
@Flocke Я совершенно забыл, что без помощи контроллера tomcat и spring boot обслуживают только статическое содержимое из его каталогов static и public ...
Я получил это на работу:
<td th:style = "'background: url(/images/aws2.png)'" class = "fluid hero-image" >
Что ж, если у вас есть что-то более сложное, например, необходимость передать переменную в URL-адрес, вы можете попробовать следующее:
<div id = "profile_image" th:style = "'background-image: url('+ @{'/view-profile-pic/' + ${result.profile_pic}} +');'"></div>
А в css изображение отображалось правильно:
#profile_image {
margin: auto;
height: 200px;
width: 200px;
box-sizing: border-box;
border-radius: 100px;
background-size: cover;
}
Я наткнулся на это решение, когда хотел отображать изображения профиля, полученные из результатов поиска.
# 1 Если вы хотите улучшить читаемость, используйте th: style = "| background-image: url (@ {dpurl}); |"