Can't load image on thymeleaf and Spring

Question

I'm using thymeleaf with SpringMVC, and I'm trying to load a image to the view.

In the project my image is on MyApp/WebContent/resources/images

I tried:

<img src="WebContent/resources/images/photo.png" 
    class="img-responsive" width="100" height="100">
</div>

and I get the next error:

No mapping found for HTTP request with URI [/MyApp/WebContent/resources/images/photo.png] in DispatcherServlet with name 'thymeleaf'

I tried too to put the imagen on the next paths:

MyApp/main/src/resources/images

MyApp/main/src/resources/static/images

MyApp/WebContent/WEB-INF/resources/images

MyApp/WebContent/WEB-INF/images

but it never works

I edit to add the dependencies from my project.

Dependencies from the pom.xml:

<dependencies>

        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-core</artifactId>
            <version>5.2.6.Final</version>
        </dependency>

        <!-- Hibernate validator -->

        <dependency>
            <groupId>org.hibernate</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>5.2.5.Final</version>
        </dependency>

        <dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
            <version>2.0.1.Final</version>
        </dependency>


        <!-- Javassist (required by Hibernate) -->
        <dependency>
            <groupId>javassist</groupId>
            <artifactId>javassist</artifactId>
            <version>3.12.1.GA</version>
        </dependency>

                        <!-- MYSQL -->

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.40</version>
        </dependency>

        <!-- SPRING -->


        <!-- Spring Context -->

        <dependency>
          <groupId>org.springframework</groupId>
          <artifactId>spring-context</artifactId>
          <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring ORM -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-orm</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring MVC -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring tx -->

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-tx</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring AOP -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <!-- Spring web -->

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-web</artifactId>
            <version>4.3.7.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-core</artifactId>
            <version>4.2.4.RELEASE</version>
        </dependency>


        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-web</artifactId>
            <version>4.2.2.RELEASE</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-config</artifactId>
            <version>4.2.5.RELEASE</version>
        </dependency>

        <!-- Spring test -->

        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-test</artifactId>
            <version>4.3.7.RELEASE</version>
            <scope>test</scope>
        </dependency>

        <!-- SLF4J -->

        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>slf4j-simple</artifactId>
            <version>1.7.25</version>
        </dependency>

        <!-- CGLIB required by Spring -->

        <dependency>
            <groupId>cglib</groupId>
            <artifactId>cglib-nodep</artifactId>
            <version>3.2.6</version>
        </dependency>

        <!--JUnit -->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.4</version>
            <scope>test</scope>
        </dependency>


<!-- Tag libs support for view layer -->

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>javax.servlet-api</artifactId>
    <version>3.1.0</version>
    <scope>provided</scope>

</dependency>


<dependency>
    <groupId>commons-dbcp</groupId>
    <artifactId>commons-dbcp</artifactId>
    <version>1.2.2</version>
</dependency>



    <dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>
    <dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>


<dependency>
    <groupId>commons-beanutils</groupId>
    <artifactId>commons-beanutils</artifactId>
    <version>1.9.3</version>
</dependency>

<dependency>
    <groupId>commons-digester</groupId>
    <artifactId>commons-digester</artifactId>
    <version>2.1</version>
</dependency>

 <dependency>
    <groupId>org.slf4j</groupId>
    <artifactId>slf4j-api</artifactId>
    <version>1.7.25</version>
</dependency>

   <dependency>
        <groupId>org.hibernate.javax.persistence</groupId>
        <artifactId>hibernate-jpa-2.0-api</artifactId>
        <version>1.0.1.Final</version>
    </dependency>
    </dependencies>


            <!-- Optional, for bootstrap -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7</version>
        </dependency>

Controller:

@RequestMapping("/choose")
    public String index() {
        return  "choose";

    @RequestMapping(value = "/categories", method = RequestMethod.GET)  
    public String getAllCategories(Model model)
    {
        model.addAttribute("clist", productService.listCategories());
        return "categories";
    }

    @RequestMapping(value = "/products", method = RequestMethod.GET)
    public String getAllProducts(Model model) {
        model.addAttribute("plist", productService.listProducts());

        return "products";
    }

project structure:

   - pom.xml
   - src/
         - main/
               - java/
                     - controller/
                     - model/
                            - dao/  *it contains the interface and the implementation
                            - service/  *it contains the interface and the implementation

               - resources/ *it contains the hibernate and spring configuration
               - WebContent/
                     - thymeleaf-servlet.xml
                     - web.xml
                     - WEB-INF/
                            -thymeleaf/ *it contains the html pages for the view
                     - META-INF/
                     - resources/
                            - images/ *it contains the images I want to display on the view
     - test/

Answer 1

You can put the image in ./src/main/resources/static/images and the image src should be :

<img src="/images/photo.png" class="img-responsive" width="100" height="100"/>

If you don't put / at the beginning, it will try to access it as an URL, instead of searching it in the static folder.

UPDATE: Please take a look at this sample project:

https://github.com/adinafometescu/tutorials/tree/master/spring-boot-image

I've created a sample project with spring boot and thymeleaf to display a simple image.

Answer 2

Declare static resources like this to your configuration files

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = {"<your Base package-name>"}
public class WebConfig implements WebMvcConfigurer {

// Declare your Static resources
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/Webcontent/**).addResourceLocations("/")
.setCachePeriod(31556926);
}

 then put img tag <img src="/WEB-INF/resources/images/photo.png" width="200px" height = "100px"/>

or in XML :

<mvc:resources location="/Webcontent/" mapping="/webcontent/**" /> //not tested but see if it works!!

this is the Java Configuration (Mostly it works!), cuz XML Config is too complex, try this and let me Know.. cheers

Answer 3

Try using this in thymleaf 1) You have to get the static content from your main/ resource folder and then in your view you do like this tried:

<img src="-(tilde 
 symbol)/../public/static/images/photo.png" 
    class="img-responsive" width="100" height="100">
 </div>