Spring boot thymeleaf images

spring email spring-boot thymeleaf

16,807

Solution 1

For me this worked;Just removing the "/"

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

Solution 2

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}"/>

Solution 3

The syntax is right. Now verify you have the next structure in your project:

🗁 src
  └─── 🗁 main
      └─── 🗁 resources
          └─── 🗁 public
              └─── 🗁 img
                  └─── signature.png

You could store your image under public or static folder, both will be working for thymeleaf.

Solution 4

To avoid the error, you add the server domain.

<img th:src="@{http://domain:8080/img/signature.png}" />

The following code works without error:

<img th:src="@{__${#httpServletRequest.scheme + '://' + #httpServletRequest.serverName + ':' + #httpServletRequest.serverPort}__/img/signature.png}" />

View more solutions

16,807

Amine Hatim

Updated on June 04, 2022

Comments

Amine Hatim almost 2 years

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

Amine Hatim over 7 years

This doesn't work I have this error Undefined Image file ("../static/img/signature.png").
DimaSan over 7 years

make sure your Thymeleaf is configured. Because you shouldn't see the ../static/img/signature.png URL, it's used only while static template development. Thymeleaf should define the appropriate URL dynamically.
Amine Hatim over 7 years

I use the spring-boot default configuration. When I use images in the others template it works witout problem. But when I use it in this template for emailing it doesn't work
DimaSan over 7 years

Create a minimal example that demonstrates this behavior, or upload your current project somewhere. There is not enough information to answer your question.
Flocke over 5 years

That isn't a good idea. When doing so you are getting a relative path based on the current location. Sometimes you are at ApplicationContext/ but sometimes you are at e.g. "ApplicationContext/Sub/Subsub/" and then you are getting a wrong url for your image.
oxyt almost 5 years

@AmineHatim I know it was a while ago but I wonder if you did find a solution to this problem. I'm having the same problem. The image works fine on other templates but not in the email template. It is really annoying :)
Oleksandr Potomkin over 4 years

If your template is in the folder "templates" use '../static/img/signature.png'. From folder "templates/subfolder1" use '../../static/img/signature.png'. From "templates/subfolder1/subfolder2" use '../../../static/img/signature.png' and so on.