Spring Security:I can load static resources but not images

Question

I tried all the suggestions from here but i could not make it work spring boot security static resources

I have to specify that the image i am trying to add is on the log in page.

I am using maven to create a spring boot webapp with security and thymeleaf. It seems that all my static resources load fine(css/jss)but the images do not.When i check the developer tools in chrome i get a 404 error for that said image in the console.no matter what path i am using i am geting the same error.I have permited access to all the static content here

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
 @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests().antMatchers(HttpMethod.GET,"/resources/**" ,"/js/**", "/css/**", "/images/**" ,"/fonts/**", "/scss/**", "/index", "/", "/login").permitAll()
                .and()
                .authorizeRequests()
                .requestMatchers(PathRequest.toStaticResources().atCommonLocations()).permitAll()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .loginPage("/login")
                .permitAll()
                .defaultSuccessUrl("/home", true)
                .and()
                .logout()
                .logoutSuccessUrl("/")
                .logoutUrl("/signout");

    }

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

this is how i access it in thymeleaf

 <div class="col-lg-2 ml-auto"  data-aos="fade-up" data-aos-delay="100">
                    <figure class="img-absolute">
                        <img th:src="@{/images/car.jpeg}" alt="Image" class="img-fluid">
                    </figure>
                </div>

this is my folder structure

src->main->resources->static->images->car.jpeg

and this is the error i get in dev tools GET http://localhost:8080/images/car.jpeg 404

any help would be greatly appreciated.

did you try to re-run it? Your code looks fine. – BeLeTh Jun 21 '20 at 10:43 — BeLeTh, Jun 21 '20 at 10:43

score 3 · Accepted Answer · answered Jun 22 '20 at 03:54

Use this approach to get the static images and other resources to load on your html page -

1.) Correct your folder structure for images, It should be - your_project_name -> src -> main -> resources -> static -> assets -> img --> your images

NOTE - Add your other static files and folders inside assets folder.

2.) And your Security config class -

    @Configuration
    @EnableWebSecurity
    public class SecurityConfig extends WebSecurityConfigurerAdapter {
    
         // your code

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

3.) Use correct url on your html page to access the images -

//your code
<img th:src="@{/assets/img/car.jpeg}" alt="Image" class="img-fluid">

score 1 · Answer 2 · answered Aug 08 '23 at 13:53

I had a similar issue with Spring Security 6.1.2. I placed my pictures in this directory 01-web-app/src/main/resources/static/images/car-pictures so I had to expose images directory and its contents.

SecurityConfig.class

@Configuration
@EnableWebSecurity
public class SecurityConfig {

@Bean
public UserDetailsManager userDetailsManager(DataSource dataSource) {
  return new JdbcUserDetailsManager(dataSource);
}

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
  http.authorizeHttpRequests(configurer ->
    configurer
      .requestMatchers("/admin/**").hasRole("ADMIN")
      .requestMatchers("/webjars/**").permitAll()
      .requestMatchers("/cars/**").permitAll()
      .requestMatchers("/images/**").permitAll()
      .requestMatchers("/css/**").permitAll()
      .anyRequest().authenticated()
  ).formLogin(form ->
    form
      .loginPage("/showLoginPage")
      .loginProcessingUrl("/authenticateTheUser")
      .permitAll()
  ).logout(LogoutConfigurer::permitAll
  );

  return http.build();
}
}

car-list.html

  <div th:each="car : ${cars}">
    <img th:src="${car.image}"/>
  </div>

And my browser renders the following

<img src="images/car-pictures/audi-tt-white.jpeg">

Spring Security:I can load static resources but not images

2 Answers2