英文:
Can't display an image in the Thymeleaf/Spring Boot App
问题
I have got a problem, which I have been trying to resolve for hours without any success.
I'm building a Spring Boot app with Thymeleaf. In general, I need to put a logo on the index.html page, but it doesn't display at all. I have tried different URI configurations (as in the code snippet), both with and without Thymeleaf tags, none of them worked. Other Thymeleaf (e.g., conditionals etc.) tags work fine - I have tested it, so dependency is not a cause.
Once, I built an app using JSP views and I didn't have any issues with images.
What do you think, am I missing something or what?
project structure
src
|_main
|_ java
|_ resources
|_ static
|_ images
|_ logo.png
|_ templates
|_ index.html
index.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head"></head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-light">
<div class="container">
<a class="navbar-brand">
<img th:src="@{~/images/logo.png}">
MyApplication
</a>
</div>
</nav>
<img th:src="@{~/static/images/logo.png}">
<img th:src="@{~/images/logo.png}">
<img th:src="@{//static/images/logo.png}">
<img th:src="@{//images/logo.png}">
<img th:src="@{/static/images/logo.png}">
<img th:src="@{static/images/logo.png}">
<img th:src="@{/resources/static/images/logo.png}">
<img th:src="@{resources/static/images/logo.png}">
<img th:src="@{//static/images/logo.png}">
<img th:src="@{//static/images/logo.png}">
<img th:src="@{//resources/static/images/logo.png}">
<img th:src="@{/resources/static/images/logo.png}">
<img th:src="@{src/main/resources/static/images/logo.png}">
<img th:src="@{/src/main/resources/static/images/logo.png}">
<img src="/static/images/logo.png">
<img src="static/images/logo.png">
<img src="/resources/static/images/logo.png">
<img src="resources/static/images/logo.png">
<img src="/main/resources/static/images/logo.png">
<img src="main/resources/static/images/logo.png">
<img src="src/main/resources/static/images/logo.png">
<img src="/src/main/resources/static/images/logo.png">
<img src="D:/Users/Maciek/Documents/git/hotelreservation/src/main/resources/static/images/logo.png">
<img src="D:\Users\Maciek\Documents\git\hotelreservation\src\main\resources\static\images\logo.png">
<footer th:replace="fragments/footer"></footer>
</body>
</html>
英文:
I have got a problem, which I have been trying to resolve for hours without any success.
I'm building a Spring Boot app with Thymeleaf. In general, I need to put a logo on the index.html page, but it doesn't display at all. I have tried different uri configurations (as in the code snippet), both with and without thymeleaf tags, none of them worked.
Other thymeleaf (eg. conditionals etc.) tags work fine - I have tested it, so dependency is not a cause.
Once, I built an app using jsp views and I didn't have any issues with images.
What do you think, am I missing something or what?
project structure
src
|_main
|_ java
|_ resources
|_ static
|_ images
|_ logo.png
|_ templates
|_ index.html
index.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="fragments/head"></head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-light"> <!--style="background-color: blueviolet"-->
<div class="container">
<a class="navbar-brand">
<img th:src="@{~/images/logo.png}">
MyApplication
</a>
</div>
</nav>
<img th:src="@{~/static/images/logo.png}">
<img th:src="@{~/images/logo.png}">
<img th:src="@{//static/images/logo.png}">
<img th:src="@{//images/logo.png}">
<img th:src="@{/static/images/logo.png}">
<img th:src="@{static/images/logo.png}">
<img th:src="@{/resources/static/images/logo.png}">
<img th:src="@{resources/static/images/logo.png}">
<img th:src="@{//static/images/logo.png}">
<img th:src="@{//static/images/logo.png}">
<img th:src="@{//resources/static/images/logo.png}">
<img th:src="@{/resources/static/images/logo.png}">
<img th:src="@{src/main/resources/static/images/logo.png}">
<img th:src="@{/src/main/resources/static/images/logo.png}">
<img src="/static/images/logo.png">
<img src="static/images/logo.png">
<img src="/resources/static/images/logo.png">
<img src="resources/static/images/logo.png">
<img src="/main/resources/static/images/logo.png">
<img src="main/resources/static/images/logo.png">
<img src="src/main/resources/static/images/logo.png">
<img src="/src/main/resources/static/images/logo.png">
<img src="hotelreservation/src/main/resources/static/images/logo.png">
<img src="/hotelreservation/src/main/resources/static/images/logo.png">
<img src="D:/Users/Maciek/Documents/git/hotelreservation/src/main/resources/static/images/logo.png">
<img src="D:\Users\Maciek\Documents\git\hotelreservation\src\main\resources\static\images\logo.png">
<footer th:replace="fragments/footer"></footer>
</body>
</html>
答案1
得分: 3
删除 ~，像这样：
<img th:src="@{/images/logo.png}">
如果你使用了Spring Security，请确保允许对资源的请求，方法是在扩展了WebSecurityConfigurerAdapter的Security配置类中覆盖以下方法：
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring().antMatchers("static/**");
}
英文:
remove ~, like so:
<img th:src="@{/images/logo.png}">
Also if you have Spring Security make sure to allow requests to your resources by overriding this method in your Security Configuration class (the one extending WebSecurityConfigurerAdapter)
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring().antMatchers("static/**");
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论