简体   繁体   English

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

[英]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.我正在使用 Thymeleaf 构建 Spring 引导应用程序。 In general, I need to put a logo on the index.html page, but it doesn't display at all.一般来说,我需要在 index.html 页面上放一个 logo,但它根本不显示。 I have tried different uri configurations (as in the code snippet), both with and without thymeleaf tags, none of them worked.我尝试了不同的 uri 配置(如代码片段中所示),无论有无 thymeleaf 标签,它们都不起作用。 Other thymeleaf (eg. conditionals etc.) tags work fine - I have tested it, so dependency is not a cause.其他 thymeleaf (例如条件等)标签工作正常 - 我已经测试过了,所以依赖不是原因。

Once, I built an app using jsp views and I didn't have any issues with images.有一次,我使用 jsp 视图构建了一个应用程序,我对图像没有任何问题。

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索引.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>


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)此外,如果您有 Spring 安全,请确保通过在您的安全配置 class(扩展 WebSecurityConfigurerAdapter)中覆盖此方法来允许对您的资源的请求

@Override
public void configure(WebSecurity web) throws Exception {
    web.ignoring().antMatchers("static/**");
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM