Search code examples
htmlspringthymeleaf

Images in html for Spring thymeleaf won't show up

Below, I am using login.html as the page where I am adding the image test.png within /static/images/

layout

So, in login.html, I have <img src="../static/images/test.png" width="1000" th:src="@{images/test.png}"/>, which gives a blank image. Why isn't it showing up?

In my SecurityConfiguration.java file, I have

@Override
protected void configure(final HttpSecurity http) throws Exception {
    http
      .csrf().disable()
      .authorizeRequests()
      //.antMatchers("/**").hasRole("ADMIN")
      .antMatchers("/static").permitAll()
      .and().formLogin()
      .loginPage("/login")
      .permitAll();

When I use this configuration, it uses the default index.html page which shows the image fine. But, If I uncomment .antMatchers("/**").hasRole("ADMIN"), it will bring me to login.html, but I can't view the image.

Solution

  • There are 3 problems I can spot.

    1. Instead of .antMatchers("/static") you should rather have .antMatchers("/images/**") since anything from src/main/resources/static will be served from the root of your application (as explained here - mind that folders "public" and "static" are interchangeable to Spring Boot).
    2. Order of matchers for .authorizeRequests() matters! Just look as last example of method's documentation. You should have your ant matchers reversed:
       .antMatchers("/images/**").permitAll() // more detailed paths should go first
   .antMatchers("/**").hasRole("ADMIN")   // more general paths should go last
    1. Consider using th:src="@{/images/test.png}" instead of th:src="@{images/test.png}". The extra slash at beginning makes the path relative to the root of your application what gets along with first advice. As stated in Thymeleaf's documentation:

    Relative URLs starting with / (eg: /order/details) will be automatically prefixed by the application context name.