komal dedhia
komal dedhia

Reputation: 347

img not showing using Thymeleaf and Springboot

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>

Upvotes: 20

Views: 27907

Answers (3)

Sushil Kumar
Sushil Kumar

Reputation: 1

As Andy Wilkinson said - 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

And use it in this way

<img th:src="@{/images/image.png}" alt="image" width="300" height="200">

Upvotes: 0

Abrahim
Abrahim

Reputation: 1

This may help. I am using it in my application and no error shown (at least in Mozilla). use ../.. to access files and directories in your application.

<img alt="Caption X" class="rounded-circle img-responsive mt-2"
   height="128" th:src="@{/../static/images/theImage.png}" width="128">

I works fine in Thymeleaf.

Upvotes: 0

Andy Wilkinson
Andy Wilkinson

Reputation: 116051

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

Upvotes: 18

Related Questions