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

Answer 2

You need to understand how HTTP works. When the browser loads a page at URL

http://some.host/myWebApp/foo/bar.html 

and the HTML page contains

<img src="images/test.png"/> 

the browser will send a second HTTP request to the server to load the image. The URL of the image, since the path is relative, will be http://some.host/myWebApp/foo/images/test.png. Note that the absolute path is composed from the current "directory" of the page, concatenated with the relative path of the image. The path of the server-side JSP or thymeleaf template is completely irrelevant here. What matters is the URL of the page, as displayed in the address bar of the browser. This URL is, in a typical Spring MVC application, the URL of the controller where the initial request was sent.

If the path of the image is absolute:

<img src="/myWebApp/images/test.png"/> 

then the browser will send a second request to the URL http://some.host/myWebApp/images/test.png. The browser starts from the root of the web server, and concatenates the absolute path.

To be able to reference an image, whetever the URL of the page is, an absolute path is thus preferrable and easier to use.

In the above example, /myWebAppis the context path of the application, that you typically don't want to hard-code in the path, because it might change. Thankfully, according to the thymeleaf documentation, thymeleaf understands that and provides a syntax for context-relative paths, which thus transforms paths like /images/test.png into /myWebApp/images/test.png. So your image should look like

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

(I've never used thymeleaf, but that's what I deduce from the documentation).

And the test.png image should thus be in a folder images located under the root of the webapp.