Spring security login page - images

Question

i'm a newbie. I'm trying to developp a webapp using Spring. I have a custom login page where i want to insert an image. How can i do? I've red all of the questions on SO but no one worked for me...

I don't know why i can't see the image.

This is my project structure :

- src/main/resources
  - images
    -logo.png
  + static
  - template
    -login.html

that's the image in login.html:

<img src="/resources/images/logo.png" align="left" />

could be better using thymeleaf taglib th:?

that's securityConfig :

@Override
protected void configure(HttpSecurity http) throws Exception {

    http
    .authorizeRequests()
    .anyRequest().authenticated()
    .and()
    .formLogin()
    .loginPage("/login")
    .permitAll()
    .and()
    .logout()
    .permitAll();
}

Answer 1

Your request to get the image will be blocked because the user is not authenticated. You have to whitelist the URLs to your static resources (Javascript files, images, CSS files etc).

This will work:

@Override
protected void configure(HttpSecurity http) throws Exception {

    String[] staticResources  =  {
        "/css/**",
        "/images/**",
        "/fonts/**",
        "/scripts/**",
    };

    http
        .authorizeRequests()
            .antMatchers(staticResources).permitAll()
            .anyRequest().authenticated()
            .and()
        .formLogin()
            .loginPage("/login").permitAll()
            .and()
        .logout().permitAll();
}

Also, my folder structure is:

/src/main/resources/static/images/...
/src/main/resources/static/scripts/...

My code works for this setup.

Answer 2

You should hold your images under static folder it's default directory for resources. For example move images folder there and modify HTML:

<img src="images/logo.png" align="left" />

or this if you want append some variables in image's path:

<img th:src="images/logo.png" align="left" />