img not showing using Thymeleaf and Springboot

spring-boot thymeleaf
komal dedhia picture komal dedhia · Nov 19, 2014 · Viewed 20.4k times · Source

I am using thymeleaf along with springboot

I am not able to view any images in my HTML file. I have tried all different ways of doing the same in thymeleaf but no luck.

Here is my project folder structure

🗁 src
└─── 🗁 main
    └─── 🗁 resources
        ├─── 🗁 templates
        ├─── 🗁 css
        └─── 🗁 images

HTML File

<head>
    <title>Community Bike Share Web Application</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.1.1/css/bootstrap.min.css}" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>

<div>
    <img th:src="@{/images/taiwan_Bicycle_Ride_hd_wallpaper_8.jpg}"
         src="../images/taiwan_Bicycle_Ride_hd_wallpaper_8.jpg" class="img-responsive" alt="Responsive image"/>
</div>

Answer

Andy Wilkinson picture Andy Wilkinson · Nov 19, 2014

With Boot's default configuration, your images (and other static content), need to be beneath src/main/resources/static. For example, to serve content from /images put the files in src/main/resources/static/images

Related questions

Error resolving template "index", template might not exist or might not be accessible by any of the configured Template Resolvers

This question has been asked before but I did not solve my problem and I getting some weird functionality. If I put my index.html file in the static directory like so: I get the following error in my browser: …

Read More
Spring Boot and custom 404 error page

In my Spring Boot application, I'm trying to configure custom error pages, for example for 404, I have added a following Bean to my application configuration: @Bean public EmbeddedServletContainerCustomizer containerCustomizer() { return new EmbeddedServletContainerCustomizer() { @Override public void customize(ConfigurableEmbeddedServletContainer container) { container.addErrorPages(…

Read More
How to bind an object list with thymeleaf?

I am having a lot of difficulty with POSTing back a form to the controller, which should contain simply an arraylist of objects that the user may edit. The form loads up correctly, but when it's posted, it never seems …

Read More