在片段中使用图像时，图像会显示在某些页面上，但不会显示在其他页面上。为什么？答案

【问题标题】：When using an image in a fragment, the image is shown on some pages, but not other. Why?在片段中使用图像时，图像会显示在某些页面上，但不会显示在其他页面上。为什么？
【发布时间】：2021-08-12 07:12:55
【问题描述】：

我有一个这样的片段：


   <header th:fragment="navbar">
            <nav class="navbar navbar-expand-sm bg-info navbar-dark">

                <a th:href="@{/main}"><img th:src="@{logo.png}" alt="Sauna" class="navbar-brand" style="height:45px"/></a>
                <div class="collapse navbar-collapse" id="collapsibleNavbar">
                    <ul class="navbar-nav">
                        <li sec:authorize="hasAuthority('USER')" class="nav-item">
                            <a class="nav-link" th:href="@{/wall}">Lauteet</a>
                        </li>
                        <li sec:authorize="hasAuthority('USER')" class="nav-item">
                            <a class="nav-link" th:href="@{/saunojat}">Etsi saunoja</a>
                        </li>
                        <li sec:authorize="hasAuthority('USER')" class="nav-item">
                            <a class="nav-link" th:href="@{'/saunojat/' + ${#authentication.name}}">Oma profiili</a>
                        </li>
                        <li sec:authorize="hasAuthority('ADMIN')" class="nav-item">
                            <a class="nav-link" th:href="@{/notifications}">Yksityisilmoitukset</a>
                        </li>
                    </ul>
                </div>  
            </nav>
    </header>

此导航栏中最上面的项目，集在我的项目的某些页面上显示图像，但在其他方面，除了图片之外，它还显示来自 alt 参数的“Sauna”字符串未找到标准徽标。这怎么可能？

【问题讨论】：

标签： html spring-boot thymeleaf

【解决方案1】：

好吧，您忘记指定它可以工作和不工作的页面的 url，所以这是一种有根据的猜测答案。

但是，我在您发布的标记中说一个危险信号，很可能是问题所在（除了您自己弄清楚的安全配置）。这是关于属性th:src="@{logo.png}" 及其解决方式的问题。

你写它的方式，它是一个相对路径，所以它会根据你当前的 URL 解析。

举个例子，假设您的应用具有基本 URL http://localhost:8080。使用相对路径，它将在http://localhost:8080/logo.png 中搜索图像。问题是您在 http://localhost:8080/admin/users 上导航，现在图像 src 将解析为 http://localhost:8080/admin/users/logo.png，这很可能会导致 404 状态。

要创建文件的绝对路径而不考虑您当前的 url，您必须将 src 属性更改为 th:src="@{/logo.png}"。名称前的/ 表示它将根据您的域的根目录解析，而不是当前 URL（相对）。

另一种解决方案是在 HTML 头部中明确指定相对链接的基本 URL。通过在 HTML 的 <head> 部分添加 <base href="http://localhost:8080/" /> 来指示文件中的相对链接应针对该路径解析，可以实现与绝对路径相同的结果。

【讨论】：

感谢您的回答！这实际上是有道理的，因为现在我认为，它不起作用的页面有 url:s exaclty，就像你说的那样，在另一条路径后面，就像这样：localhost:8080/admin/users。现在，当我尝试时，通过允许直接访问文件，安全配置再次发挥了作用。只是碰巧我错误地将路径更正为绝对路径。问题是，我可以发誓我在一开始就用破折号尝试过，因为没有它看起来很有趣：D 但显然情况并非如此！再次感谢您。
我会给你一个赞成票，但我没有足够的分数来做那件事..
@mortar-1 如果您可以通过单击投票下方的灰色复选标记来接受我的回答，这将有所帮助。我认为here 是详细的过程。谢谢！

【解决方案2】：

问题似乎与 Spring 安全性有关..

@Override
    public void configure(HttpSecurity http) throws Exception {
       
        
        http.csrf().disable();
        http.headers().frameOptions().sameOrigin();

        http.authorizeRequests()
                .antMatchers("/").permitAll()
                .antMatchers("/css/**").permitAll()
                .antMatchers("/h2-console", "/h2-console/**").permitAll()
                .antMatchers("/main").permitAll()
                .antMatchers("/register").permitAll()
                .antMatchers("/logo.png").permitAll()
                .antMatchers("/notifications").hasAuthority("ADMIN")
                .antMatchers(HttpMethod.POST).authenticated()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/main")
                .loginProcessingUrl("/main")
                .defaultSuccessUrl("/wall", true)
                .failureUrl("/main?error=true")
                .and()
                .logout()
                .logoutSuccessUrl("/main?logout=true");
    }

问题似乎是我允许访问 logo.png 文件本身（它位于公共文件夹的根目录中。我创建了一个文件夹（公共图像）到公共的根目录 -> 移动文件在那里。并更正了 html 图像源以匹配新位置。当允许访问新文件夹时，一切正常..

... antMatchers("/public-images/**").permitAll() ...

仍然：为什么在这些更改之前它适用于某些页面而不适用于其他页面？ :D

【讨论】：