1

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/
Jane C.
  • 55
  • 3
  • 13

3 Answers3

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.

Saikat
  • 14,222
  • 20
  • 104
  • 125
Adina Rolea
  • 2,031
  • 1
  • 7
  • 16
0

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>
Vishal Torne
  • 366
  • 5
  • 24
  • I put but it doesn't work – Jane C. Sep 19 '18 at 16:57
  • Have you used the template resolver or added the thymeleaf dependency by maven or gradle or like this: – Vishal Torne Sep 19 '18 at 18:36
  • See this question https://stackoverflow.com/questions/1483063/how-to-handle-static-content-in-spring-mvc – Vishal Torne Sep 19 '18 at 18:44
  • For thymeleaf refer my question : https://stackoverflow.com/questions/52114455/store-pictures-in-h2-database-spring-boot-thymleaf – Vishal Torne Sep 19 '18 at 18:45
  • Thank you for the links. But when I put on my DispatcherServlet, I get the next error: org.springframework.web.servlet.PageNotFound noHandlerFound ADVERTENCIA: No mapping found for HTTP request with URI [/MyApp] in DispatcherServlet with name 'thymeleaf' – Jane C. Sep 19 '18 at 20:04
  • see this question if you have scanned the wrong package https://stackoverflow.com/questions/1266303/no-mapping-found-for-http-request-with-uri-web-inf-pages-apiform-jsp – Vishal Torne Sep 19 '18 at 20:22
  • I added to the configuration and the previous error is solved, but I can't to see the images... I tried with and with " class="img-responsive" width="100" height="100"> but none of them works – Jane C. Sep 19 '18 at 20:25
  • I edit to add the controller. My problem is on choose.html. I want to put two images on it for choose between get products or categories list – Jane C. Sep 19 '18 at 20:36
  • please post your project structure so that It will be clear where your images so that we can clear the doubts easily – Vishal Torne Sep 19 '18 at 20:50
  • I've just posted the project structure – Jane C. Sep 20 '18 at 15:41
  • @Jane posted another answer please check. – Vishal Torne Sep 20 '18 at 19:03
0

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

Vishal Torne
  • 366
  • 5
  • 24
  • Thanks, I try that configuration but it doesn't work. I put it on my dispatcher servlet and I try on my html – Jane C. Sep 22 '18 at 19:37
  • Dispatcher servlet means in xml file? did you put this configuration in xml file? – Vishal Torne Sep 23 '18 at 16:05
  • I have a few xml for configuration: one for hibernate, one for spring, and the last is the dispatcher servlet (needed for develop the view) – Jane C. Sep 23 '18 at 16:09
  • 1
    The Configuration which I showed you is a Java class called webconfig did you create a class called WebConfig? – Vishal Torne Sep 23 '18 at 16:12
  • I'm using xml configuration, and I added that to my dispatcher config. Maybe should I to add this to the spring configuration? I'll try it – Jane C. Sep 26 '18 at 17:06