Insert image from local directory in spring thimeleaf structure (with maven)

Question

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

I have two html files. abc.html and xyz.html. To embed images on an html page, I used the url:

<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 on my server. I tried to put the file in the same directory of the html file, but it does not work. I even tried to give the full path, but to no avail. This is ubuntu OS. Please help me here. Is there a 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 documentation of Timalefat Standard URL syntax, and in particular, relative URLs and relative URLs.

Context-specific URL:

If you want to link resources inside your webapp, you must use contextual relative URLs. These are the URLs that should be relative to the root of the web application, if installed on the server. For example, if we deploy the myapp.war file to a Tomcat server, our application will probably be available as http: // localhost: 8080 / myapp , and myapp will be the name of the context.

As JB Nizet, the following will work for you, since I used the timemeaf personally in the webapp project,

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

and test.png should be under your project root inside the webapp folder. Something moved like this

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

For example:

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

Exit:

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

When you click http://localhost:8080/myapp/resources/images/Picture.png in your browser, you can access the image for the above syntax. And the folder of your resources will probably be in the webapp folder of your application.

Server Related URL:

Server-related URLs are very similar to context-sensitive URLs, except they do not assume that you want your URL to link to a resource within your application context and therefore allows you to link to a different context on the same server

Syntax:

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

Exit:

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

The above image will be downloaded from an application different from your context, and if your server has an application called billing-app .

Source: Thymeleaf Documentation

Answer 2

You need to understand how HTTP works. When the browser loads the page by 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 upload the image. The image URL, since the path is relative, will be http://some.host/myWebApp/foo/images/test.png . Note that the absolute path is made up of the current "directory" of the page, combined with the relative path of the image. The path of the server-side JSP or thimeleaf template is completely irrelevant here. Important is the URL of the page displayed in the address bar of the browser. This URL in a typical Spring MVC application is the URL of the controller to which the original request was sent.

If the image path 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 at the root of the web server and concatenates the absolute path.

In order to be able to link to an image, that is, the URL of the page, an absolute path is thus preferred and easier to use.

In the above example, /myWebApp is the application context path, which is usually not required by the hard code in the path, because it can change. Fortunately, according to the documentation of the thymeleaf , the thymeleaf understands this and provides syntax for context-sensitive paths, which thus transforms paths such as /myWebApp/images/test.png to /myWebApp/images/test.png . So your image should look like

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

(I never used thimeleaf, but this is what I deduced from the documentation).

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