html - Inserting an image from local directory in thymeleaf spring framework (with maven)

Question

I have developed a project using this link: https://spring.io/guides/gs/serving-web-content/ I used maven to develop above project.

I have two html files under this. abc.html and xyz.html. To insert images in the html page, I have used the url like this:

<img src="https://example.com/pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px">

But I want to use an image file located in my server instead. I tried placing the file in the same directory of html file but its not working. I even tried giving full path but of no use. This is an ubuntu OS. Please help me out here. Is there any place where I can configure the base path or basically how to put an image from my local folder.

Answer 1

I want you to look into the Thymeleaf's documentation of Standard URL Syntax and specifically the context-relative and server-relative url patterns.

Context-relative URL:

If you want to link resources inside your webapp then you should use context relative urls. These are URLs which are supposed to be relative to the web application root once it is installed on the server. For example, if we deploy a myapp.war file into a Tomcat server, our application will probably be accessible as http://localhost:8080/myapp, and myapp will be the context name.

As JB Nizet the following will work for you as I have used thymeleaf personally in a webapp project,

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

and the test.png should be under your project root inside the webapp folder. Something navigated through roughly like,

Myapp->webapp->images->test.png

Eg:

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

Output as:

<img src="/resources/image/Picture.png" />

When you hit http://localhost:8080/myapp/resources/images/Picture.png in you browser then you should be able to access the image for the above syntax to work. And your resources folder will probably under webapp folder of your application.

Server-relative URL:

Server-relative URLs are very similar to context-relative URLs, except they do not assume you want your URL to be linking to a resource inside your application’s context, and therefore allow you to link to a different context in the same server

Syntax:

<img th:src="@{~/billing-app/images/Invoice.png}">

Output as:

<a href="/billing-app/showDetails.htm">

The above image will be loaded from an application different from your context and if an application named billing-app is present in your server.

Sourced from: Thymeleaf documentation