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.

Answer 1

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">