Can't load image with spring boot thymeleaf

Question

I'm very new to spring boot and following Guru spring framework tutorial.

My simple spring boot application runs successfully and my controller works fine. I have used thymeleaf to show html pages and used some bootstrap css.everything works fine but an image tag that I have in one of my html pages. Thymeleaf shows the correct page when I run the app but image is not shown.I googled about this and put my images under /resources/static/images.This is my project structure :

I have also copied the same image to templates directory and used both files but none can be loaded.

This is my html file :

And this is what I get when I run the application :

404 not found error :

Can anyone tell me what I'm missing?

Answer 1

Try changing to

<img src="../static/images/pirate.jpg" width="1000" th:src="@{images/pirate.jpg}"/>

Answer 2

In img tag the attribute th:src's value is pointing to incorrect path, it should be th:src="@{images/pirates.jpg}" instead of th:src="@{../static/images/pirates.jpg}"

<img src="../static/images/pirates.jpg" width="1000"
             th:src="@{images/pirates.jpg}"/>

Check the final path in the rendered HTML in browser by viewing the source

Answer 3

I had the same problem and when I remove leading slash it works

<img th:src="@{images/TacoCloud.png}" />

Answer 4

All the resources are stored in static folder and that is the default directory. You don't need to specify the relative path of the image you want to use. Just simply put the filename.

example

Answer 5

After using the following code I solved my error, You need to use src="@{/images/pirates.jpg}". instead of this src="@{images/pirates.jpg}"

Answer 6

Phew! Finally found the issue.

I finally discovered something fruitful about this issue after spending a whole goddamn day.

So here it goes:

1. Please put your images under this directory => resources/static/images/<your_image>

2. Now that you have put your image, it's time to source it from your tag in the HTML file. I personally was using Spring Boot's offering called thymleaf, so this answer will relate to that only.

The correct thymleaf file command for having an image is as follows:

<img width="40px" th:src="@{images/danceperf.jpg}" /> 

3. You don't need to put any other folder name as such expect parent folder of images. (Remember: You need to add one child folder to resources which will serve as a parent folder for images.)

4. After this, finally (this is important !) => Build your project and then start your spring boot app. The image should load just fine.

Hope this answer helps!