CODEWITHSUNDEEP
cssspring-bootimport
pikameuh
pikameuh

Reputation: 159

Load/Use static content with springBoot (css/jpg)

I am lost with something 'stupid'. I am building my first spring application and I am trying to access css and jpg ressources files.

I rode many pages/forum and everyone's answer is "spring uses automatically what is in /static folder" But I fail, and fail and fail again to include css and picture on my page. I tried so many things, now I feel totally lost (it's suppose to be an easy thing to do)

I use a WebSecurityConfigurerAdapter:

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter{
    @Autowired
    private UtilisateurUserDetailsService userService;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        // @formatter:off
        http.authorizeRequests()
            .antMatchers("/","/index","/page1","/open/**", "/static/**",  "/css/**",  "/img/**").permitAll()
            .anyRequest().authenticated()
            .and()
            .formLogin()
                .loginPage("/login")
                .defaultSuccessUrl("/secure/page1")
                .failureUrl("/login?error=true")
                .permitAll()
            .and()
            .logout()
                .logoutUrl("/logout")
                .logoutSuccessUrl("/index")
                .permitAll();
        // @formatter:on

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

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userService);
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }

}

In my application.property I have:

spring.resources.static-locations=classpath:static

There is my project arborescence: arborescence

And this is my index.html file:

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>My Quotes</title>

<link th:href="#{/css/main.css}" rel="stylesheet" >
    
<link rel="stylesheet"
    href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
    crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
    crossorigin="anonymous"></script>
<script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous"></script>
<script
    src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
    integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
    crossorigin="anonymous"></script>

</head>


<body>
    <div class="container">
        <div th:if="${param.logout}" class="alert alert-info">Deconnected</div>

        <div class="form-group">
            <h1>Bienvenue dans MyQuotes</h1>

            <div class="form-group">
                <div class="button-group" sec:authorize="!isFullyAuthenticated()">
                    <a th:href="@{/login}" class="btn btn-outline-success topright">login</a>
                </div>
                <div class="button-group" sec:authorize="isFullyAuthenticated()">
                    <a th:href="@{/logout}" class="btn btn-outline-warning topright">logout</a>
                </div>

                </br> <span>Ici vous pouvez enregistrer et retrouver toutes vos
                    meilleurs citations et celles de vos amis </span> </br> </br> <a
                    th:href="@{/open/search}" class="btn btn-outline-warning">chercher
                    une quote</a>
            </div>
        </div>

    </div>
<img th:src="@{img/img.jpg}"/>

</body>
</html>

Do someone can spot what I am doing wrong or what I am missing ?

Upvotes: 0

Views: 31

Answers (1)

want2learn
want2learn

Reputation: 2511

Update your code to refer CSS as below and it should work.

<link th:href="@{/css/main.css}" rel="stylesheet" >

You can find more details here

Upvotes: 1

Related Questions