Resolve background image url Zk

Question

I'm running demo project from ZK and try to add image tag and find this problem I have two tag

1. <div style="background-image: url('img/zklogo3.png');padding:0px 0px 0px 0px;">
2. <image src="~./img/zklogo3.png" width="100px"/>

The image 2 can show on the screen and being resolved with this URL:

 http://localhost:8080/zkres/web/6cbcf362/img/zklogo3.png

but the one in style can not resolve and return error not found, URL: http://localhost:8080/img/zklogo3.png, if I copy and append /zkres/web/6cbcf362 to the URL then it can show successfully

Any one, know how to solve it?

Answer 1

In a Spring boot project, in order to configure static files including images you need to have a class that implements WebMvcConfigurer. Please check below example:

@Configuration
@EnableWebMvc
public class StaticResourceConfiguration implements WebMvcConfigurer {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        System.out.println("WebMvcConfigurer loaded...");
        registry.addResourceHandler("/**")
        .addResourceLocations("classpath:/static/","classpath:/img/")
        .setCachePeriod(0);

     }
}

Sample Project structure

src
├───main
│   ├───java
│   │   └───com
│   │       └───mypackage
│   │           │   Application.java
│   │           ├───controller
│   │           │       MyController.java
│   │           └───model
│   │                   MyMessage.java
│   └───resources
│       │   application.properties
│       └───static
│           │   index.html
│           └───img
│                   zklogo3.png
└───test
    └───java
        └───com
            └───zetcode
                └───controller
                        MyControllerTest.java

Then you can simply display images like this in your HTML files.

<img src="zklogo3.png"/>

Reference doc: Spring WebMvcConfigurer