2

I'm making a sport e-commerce website using Spring Boot and Thymeleaf and in the index of products page and edit page of a particular product, I can't view the image of the product. This is how the edit a product page (inspect on Chrome) looks

Here's the HTML Code for Edit a product. The line below the current image is the one generating the error for both edit and index.

<div class="form-group">
                <label for="">Image:</label>
                <input type="file" class="form-control" th:name="file" th:id="file">
                <img class="mt-2" src="#" alt="" id="imgPreview1">
                <br><br>
                <label for="">Current image:</label>
                <img style="width: 100px;" th:src="@{'media/'+${product.image}}"> 
            </div>

I get the image from my media folder in src/main/resources/static/media and I get the product name from the database. There's no error in fetching the name of the image file from the database. It looks like a path error but I can't seem to figure it out.

Faheem azaz Bhanej
  • 2,328
  • 3
  • 14
  • 29
Aabhas Amol
  • 42
  • 5

2 Answers2

0

In spring boot, pages are searched under "templates" folder and resources are mapped under "static" folder by default. To access an image file under static folder, try

/image-path/image.ext

For example, I have an src folder under static and it has some image, logo.png then,

/src/logo.png
Abishek Stephen
  • 386
  • 1
  • 3
  • 15
  • I've tried that. I've tried different variations of the path to no avail. Do you think is there some other way? – Aabhas Amol Sep 16 '21 at 09:52
  • I had the same issue as you when I set up my server with spring boot. It is the default way the framework maps resources. The best way to check your resource location is to edit the resource path by developer mode in a browser and check for different paths for a sample resource. You can find how to use developer mode on your browser here https://helpdeskgeek.com/free-tools-review/what-is-chrome-developer-mode-what-are-its-uses/ (shown for Chrome as example) – Abishek Stephen Sep 16 '21 at 10:00
  • have you tried putting "/" before media like th:src="@{'/media/'+${product.image}} – Abishek Stephen Sep 16 '21 at 10:03
  • Yeah, I've tried that. I've tried different paths to fix it but it doesn't work. But I think I might've found what's wrong. So when I enter the dev-tools page, when I hover around the image the link it shows is admin/products/edit//media/. Maybe if it pointed to src/main/resources/static/media/ it might work. But I don't know how to do that – Aabhas Amol Sep 16 '21 at 16:08
0

Your HTML or JSP page are always in ../resources/templates/ and your image path is ../resources/static/media/. To get image from static folder you have to go back using ../ from current folder and go to media folder which is inside static folder...

Change:

../resources/static/media/liverpool_21_22_home_kit.jpg

To:

../media/liverpool_21_22_home_kit.jpg
Faheem azaz Bhanej
  • 2,328
  • 3
  • 14
  • 29