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
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.
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.
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.
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);
}
For me this worked;Just removing the "/"
<img th:src="@{img/signature.png}"/>
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}"/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With