Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Spring boot thymeleaf images

I'm trying to develop spring boot application for sendind emails. All is ok But in the template thymeleaf, when I try to add images it display error. This is a snippet of my template.html

 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:remove="all">Order Confirmation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div>

    <h2 th:text="${title}">title</h2>
    <p th:utext="${description}">
            description
    </p>

    <br />
    <br />
    <br />
    <p>Bien cordialement</p>
    <div>
        <img th:src="@{/img/signature.png}" />

    </div>
</div>

</body>
</html>

This is the error:

 ERROR [[/jira-rct/v1.0].[dispatcherServlet]] [http-nio-8080-exec-1] Servlet.service() for servlet [dispatcherServlet] in context with path [/jira-rct/v1.0] threw exception [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateProcessingException: Link base "/img/crm-signature.png" cannot be context relative (/) or page relative unless you implement the org.thymeleaf.context.IWebContext interface (context is of class: org.thymeleaf.context.Context) (email/template-1:20)] with root cause
org.thymeleaf.exceptions.TemplateProcessingException: Link base "/img/crm-signature.png" cannot be context relative (/) or page relative unless you implement the org.thymeleaf.context.IWebContext interface (context is of class: org.thymeleaf.context.Context) (email/template-1:20)
    at org.thymeleaf.standard.expression.LinkExpression.executeLink(LinkExpression.java:270) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.standard.expression.SimpleExpression.executeSimple(SimpleExpression.java:77) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.standard.expression.Expression.execute(Expression.java:103) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.standard.expression.Expression.execute(Expression.java:133) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.standard.expression.Expression.execute(Expression.java:120) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.standard.processor.attr.AbstractStandardSingleAttributeModifierAttrProcessor.getTargetAttributeValue(AbstractStandardSingleAttributeModifierAttrProcessor.java:67) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.spring4.processor.attr.SpringSrcAttrProcessor.getTargetAttributeValue(SpringSrcAttrProcessor.java:68) ~[thymeleaf-spring4-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.processor.attr.AbstractSingleAttributeModifierAttrProcessor.getModifiedAttributeValues(AbstractSingleAttributeModifierAttrProcessor.java:59) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.processor.attr.AbstractAttributeModifierAttrProcessor.processAttribute(AbstractAttributeModifierAttrProcessor.java:62) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.processor.attr.AbstractAttrProcessor.doProcess(AbstractAttrProcessor.java:87) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.processor.AbstractProcessor.process(AbstractProcessor.java:212) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.dom.Node.applyNextProcessor(Node.java:1017) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.dom.Node.processNode(Node.java:972) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.dom.NestableNode.computeNextChild(NestableNode.java:695) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.dom.NestableNode.doAdditionalProcess(NestableNode.java:668) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.dom.Node.processNode(Node.java:990) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.dom.NestableNode.computeNextChild(NestableNode.java:695) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.dom.NestableNode.doAdditionalProcess(NestableNode.java:668) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.dom.Node.processNode(Node.java:990) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]
    at org.thymeleaf.dom.NestableNode.computeNextChild(NestableNode.java:695) ~[thymeleaf-2.1.4.RELEASE.jar:2.1.4.RELEASE]

Best regards

like image 656
Amine Hatim Avatar asked Nov 30 '16 12:11

Amine Hatim


People also ask

How do I add images to Thymeleaf Spring Boot?

The displayUploadForm() method handles the GET request and returns the name of the Thymeleaf template to display to the user in order to let him import an image. The uploadImage() method handles the image upload. It accepts a multipart/form-data POST request on image upload and saves the image on the local file system.

Is Thymeleaf better than JSP?

Thymeleaf is a great templating engine which replaces JSP, and you can easily use it in any Spring MVC or Spring Boot application. Unlike JSP it's a pleasure to use.

Is Thymeleaf still popular?

While Thymeleaf is more of a template engine for server-side application development. But Thymeleaf's popularity is on a steady rise. The developer community is slowly moving away from 'once a common' MVC framework for Javascript-based development.


3 Answers

this worked for me ^_^

for Style/Image file loading

<link rel="stylesheet" th:href="${basepath+'styles/test.css'}" />
<img th:src="${basepath+'img/test.png'}" />

then you need to pass the basepath from model to your view

public void getPDF(HttpServletRequest request) throws DocumentException {
      String basepath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/";
      Context context = new Context();
      context.setVariable("fullname"," Soufiane ELAMMARI");
      context.setVariable("basepath", basepath);
}
like image 56
soufiane ELAMMARI Avatar answered Sep 17 '22 16:09

soufiane ELAMMARI


For me this worked;Just removing the "/"

<img th:src="@{img/signature.png}"/>
like image 35
Ndivhuwo Avatar answered Sep 16 '22 16:09

Ndivhuwo


Put your image inside the by the following path src/main/resources/static/img/signature.png.

Then in your template change the URL to the following:

<img src="../static/img/signature.png" th:src="@{img/signature.png}"/>
like image 41
DimaSan Avatar answered Sep 20 '22 16:09

DimaSan