[FIXED] Cannot Load Image in Spring Boot

Issue

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.

Solution

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

Answered By - Faeem azaz Bhanej
Answer Checked By - Robin (JavaFixing Admin)