Reputation: 347
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
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
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
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