无法在Thymeleaf/Spring Boot应用中显示图像。

huangapple
go评论109阅读模式
英文:

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

  1. src
  2.  |_main
  3.       |_ java
  4.       |_ resources
  5.                |_ static
  6.                       |_ images
  7.                              |_ logo.png                    
  8.                |_ templates
  9.                       |_ index.html

index.html

  1. <!doctype html>
  2. <html xmlns:th="http://www.thymeleaf.org">
  4. <head th:replace="fragments/head"></head>
  6. <body>
  7.     <!-- Navigation -->
  8.     <nav class="navbar navbar-light">
  9.         <div class="container">
  10.             <a class="navbar-brand">
  11.                 <img th:src="@{~/images/logo.png}">
  12.                 MyApplication
  13.             </a>
  14.         </div>
  15.     </nav>
  16.     <img th:src="@{~/static/images/logo.png}">
  17.     <img th:src="@{~/images/logo.png}">
  19.     <img th:src="@{//static/images/logo.png}">
  20.     <img th:src="@{//images/logo.png}">
  22.     <img th:src="@{/static/images/logo.png}">
  23.     <img th:src="@{static/images/logo.png}">
  24.     <img th:src="@{/resources/static/images/logo.png}">
  25.     <img th:src="@{resources/static/images/logo.png}">
  27.     <img th:src="@{//static/images/logo.png}">
  28.     <img th:src="@{//static/images/logo.png}">
  29.     <img th:src="@{//resources/static/images/logo.png}">
  30.     <img th:src="@{/resources/static/images/logo.png}">
  32.     <img th:src="@{src/main/resources/static/images/logo.png}">
  33.     <img th:src="@{/src/main/resources/static/images/logo.png}">
  35.     <img src="/static/images/logo.png">
  36.     <img src="static/images/logo.png">
  38.     <img src="/resources/static/images/logo.png">
  39.     <img src="resources/static/images/logo.png">
  41.     <img src="/main/resources/static/images/logo.png">
  42.     <img src="main/resources/static/images/logo.png">
  44.     <img src="src/main/resources/static/images/logo.png">
  45.     <img src="/src/main/resources/static/images/logo.png">
  47.     <img src="D:/Users/Maciek/Documents/git/hotelreservation/src/main/resources/static/images/logo.png">
  48.     <img src="D:\Users\Maciek\Documents\git\hotelreservation\src\main\resources\static\images\logo.png">
  50. <footer th:replace="fragments/footer"></footer>
  52. </body>
  53. </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

  1. src
  2.  |_main
  3.       |_ java
  4.       |_ resources
  5.                |_ static
  6.                       |_ images
  7.                              |_ logo.png                    
  8.                |_ templates
  9.                       |_ index.html

index.html

  1. &lt;!doctype html&gt;
  2. &lt;html xmlns:th=&quot;http://www.thymeleaf.org&quot;&gt;
  3. &lt;head th:replace=&quot;fragments/head&quot;&gt;&lt;/head&gt;
  4. &lt;body&gt;
  5. &lt;!-- Navigation --&gt;
  6. &lt;nav class=&quot;navbar navbar-light&quot;&gt; &lt;!--style=&quot;background-color: blueviolet&quot;--&gt;
  7. &lt;div class=&quot;container&quot;&gt;
  8. &lt;a class=&quot;navbar-brand&quot;&gt;
  9. &lt;img th:src=&quot;@{~/images/logo.png}&quot;&gt;
  10. MyApplication
  11. &lt;/a&gt;
  12. &lt;/div&gt;
  13. &lt;/nav&gt;
  14. &lt;img th:src=&quot;@{~/static/images/logo.png}&quot;&gt;
  15. &lt;img th:src=&quot;@{~/images/logo.png}&quot;&gt;
  16. &lt;img th:src=&quot;@{//static/images/logo.png}&quot;&gt;
  17. &lt;img th:src=&quot;@{//images/logo.png}&quot;&gt;
  18. &lt;img th:src=&quot;@{/static/images/logo.png}&quot;&gt;
  19. &lt;img th:src=&quot;@{static/images/logo.png}&quot;&gt;
  20. &lt;img th:src=&quot;@{/resources/static/images/logo.png}&quot;&gt;
  21. &lt;img th:src=&quot;@{resources/static/images/logo.png}&quot;&gt;
  22. &lt;img th:src=&quot;@{//static/images/logo.png}&quot;&gt;
  23. &lt;img th:src=&quot;@{//static/images/logo.png}&quot;&gt;
  24. &lt;img th:src=&quot;@{//resources/static/images/logo.png}&quot;&gt;
  25. &lt;img th:src=&quot;@{/resources/static/images/logo.png}&quot;&gt;
  26. &lt;img th:src=&quot;@{src/main/resources/static/images/logo.png}&quot;&gt;
  27. &lt;img th:src=&quot;@{/src/main/resources/static/images/logo.png}&quot;&gt;
  28. &lt;img src=&quot;/static/images/logo.png&quot;&gt;
  29. &lt;img src=&quot;static/images/logo.png&quot;&gt;
  30. &lt;img src=&quot;/resources/static/images/logo.png&quot;&gt;
  31. &lt;img src=&quot;resources/static/images/logo.png&quot;&gt;
  32. &lt;img src=&quot;/main/resources/static/images/logo.png&quot;&gt;
  33. &lt;img src=&quot;main/resources/static/images/logo.png&quot;&gt;
  34. &lt;img src=&quot;src/main/resources/static/images/logo.png&quot;&gt;
  35. &lt;img src=&quot;/src/main/resources/static/images/logo.png&quot;&gt;
  36. &lt;img src=&quot;hotelreservation/src/main/resources/static/images/logo.png&quot;&gt;
  37. &lt;img src=&quot;/hotelreservation/src/main/resources/static/images/logo.png&quot;&gt;
  38. &lt;img src=&quot;D:/Users/Maciek/Documents/git/hotelreservation/src/main/resources/static/images/logo.png&quot;&gt;
  39. &lt;img src=&quot;D:\Users\Maciek\Documents\git\hotelreservation\src\main\resources\static\images\logo.png&quot;&gt;
  40. &lt;footer th:replace=&quot;fragments/footer&quot;&gt;&lt;/footer&gt;
  41. &lt;/body&gt;
  42. &lt;/html&gt;

答案1

得分: 3

删除 ~，像这样：

  1. <img th:src="@{/images/logo.png}">

如果你使用了Spring Security，请确保允许对资源的请求，方法是在扩展了WebSecurityConfigurerAdapter的Security配置类中覆盖以下方法：

  1. @Override
  2. public void configure(WebSecurity web) throws Exception {
  3.     web.ignoring().antMatchers("static/**");
  4. }
英文:

remove ~, like so:

  1. &lt;img th:src=&quot;@{/images/logo.png}&quot;&gt;

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)

  1. @Override
  2. public void configure(WebSecurity web) throws Exception {
  3. web.ignoring().antMatchers(&quot;static/**&quot;);
  4. }

huangapple
  • 本文由 发表于 2020年8月8日 20:06:44
  • 转载请务必保留本文链接：https://go.coder-hub.com/63315185.html
  • html
  • java
  • spring
  • spring-boot
  • thymeleaf
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定