8

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 :

enter image description here

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

This is my html file :

enter image description here

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

enter image description here

404 not found error :

enter image description here

Can anyone tell me what I'm missing?

Community
  • 1
  • 1
Navid
  • 157
  • 2
  • 2
  • 14

7 Answers7

29

Try changing to 

<img src="../static/images/pirate.jpg" width="1000" th:src="@{images/pirate.jpg}"/>
Alien
  • 15,141
  • 6
  • 37
  • 57
4

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

thebytewalker
  • 316
  • 4
  • 15
3

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}" />

  1. 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.)

  2. 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!

mr-possible
  • 109
  • 1
  • 9
1

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

<img th:src="@{images/TacoCloud.png}" />
Lazar Iliev Iliev
  • 11
  • 1
1

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

Steven Tan
  • 11
  • 2
0

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

svyat1s
  • 868
  • 9
  • 12
  • 21
pawan singh sisodiya
  • 1
  • 2
  • 1
    thanks to above, I successfully used `src="@{/images/pirates.jpg}"` when the file resided at `resources/images/pirates.jpg` – gdogra Jul 28 '21 at 02:44
-1

Use- img th:src="@{/images/TacoCloud.png}" , YES, this one is totally correct. Add all of the WEB spring boot starters and also try for @RequestMapping instead of @GetMapping if it's ok.

Darshan Pawar
  • 1
  • 1
  • 1
    Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 20 '21 at 06:12