How to send email with inline image using ThymeLeaf

I’m trying to send an email with an inline image using ThymeLeaf and Spring, but so far no success. The email sends, but the inline image won’t show in the email.

The project is not web-based (not a website), but is a desktop stand-alone, not mobile

This is how I get the image file:

URL url = getClass().getResource("/LawFirmAdvisoryGroup.jpg");
File file = new File(url.getPath());

MultipartFile multipartFile = new MockMultipartFile(file.getName(),
    file.getName(), "image/jpeg", IOUtils.toByteArray(input));

JavaScript
​x
 
URL url = getClass().getResource("/LawFirmAdvisoryGroup.jpg");File file = new File(url.getPath());​MultipartFile multipartFile = new MockMultipartFile(file.getName(),    file.getName(), "image/jpeg", IOUtils.toByteArray(input));​

My service class:

@Autowired
private JavaMailSender mailSender;

@Autowired
private TemplateEngine templateEngine;

public void sendMailWithInline(final String recipientName, final String recipientEmail, final MultipartFile image, final byte[] imageBytes)
throws MessagingException {

    final Context ctx = new Context();
        ctx.setVariable("imageResourceName", image.getName()); // so that we can reference it from HTML

        final MimeMessage mimeMessage = this.mailSender.createMimeMessage();
        final MimeMessageHelper message
        = new MimeMessageHelper(mimeMessage, true, "UTF-8");
        message.setSubject("Inline Image");
        message.setFrom("XXXX@yahoo.com");
        message.setTo(recipientEmail);

        // Add the inline image, referenced from the HTML code as "cid:${imageResourceName}"
        final InputStreamSource imageSource = new ByteArrayResource(imageBytes);
        message.addInline(image.getName(), imageSource, image.getContentType());


        final String htmlContent = this.templateEngine.process("left_sidebar.html", ctx);
        message.setText(htmlContent, true);
        this.mailSender.send(mimeMessage);

    }

JavaScript
 
@Autowiredprivate JavaMailSender mailSender;​@Autowiredprivate TemplateEngine templateEngine;​public void sendMailWithInline(final String recipientName, final String recipientEmail, final MultipartFile image, final byte[] imageBytes)throws MessagingException {​    final Context ctx = new Context();        ctx.setVariable("imageResourceName", image.getName()); // so that we can reference it from HTML​        final MimeMessage mimeMessage = this.mailSender.createMimeMessage();        final MimeMessageHelper message        = new MimeMessageHelper(mimeMessage, true, "UTF-8");        message.setSubject("Inline Image");        message.setFrom("XXXX@yahoo.com");        message.setTo(recipientEmail);​        // Add the inline image, referenced from the HTML code as "cid:${imageResourceName}"        final InputStreamSource imageSource = new ByteArrayResource(imageBytes);        message.addInline(image.getName(), imageSource, image.getContentType());​​        final String htmlContent = this.templateEngine.process("left_sidebar.html", ctx);        message.setText(htmlContent, true);        this.mailSender.send(mimeMessage);​    }​

The HTML:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <title th:remove="all">Email with inline image</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  </head>
  <body>
    <p>
      <img src="LawFirmAdvisoryGroup.jpg" th:src="'cid:' + ${imageResourceName}" />
    </p>
  </body>
</html>

JavaScript
 
<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org">  <head>    <title th:remove="all">Email with inline image</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  </head>  <body>    <p>      <img src="LawFirmAdvisoryGroup.jpg" th:src="'cid:' + ${imageResourceName}" />    </p>  </body></html>​

Answer

This works perfectly:

Just add a link to the image hosted on an external server away from your desktop. Use inline CSS, instead of CSS classes.

This website will help you convert CSS classes to inline CSS, Premailer.Dialect.

Avoid any fancy CSS, just use the most basic. Floating (like float: left;) should be avoided as much as possible if you’d like your HTML mail to flow easily, even in mobile devises and other smaller screens.

Include NekoHTML in your project libraries, and change your Spring spring.xml to:

<!-- THYMELEAF: Template Resolver for email templates -->
<bean id="emailTemplateResolver" class="org.thymeleaf.templateresolver.ClassLoaderTemplateResolver">
    <property name="prefix" value="resources/WEB_INF/HTMLMailTemplates/XXXX/html/" />
    <!-- <property name="templateMode" value="HTML5" /> -->
    <property name="templateMode" value="LEGACYHTML5" />
    <property name="characterEncoding" value="UTF-8" />
    <property name="order" value="1" />
</bean>

JavaScript
 
<!-- THYMELEAF: Template Resolver for email templates --><bean id="emailTemplateResolver" class="org.thymeleaf.templateresolver.ClassLoaderTemplateResolver">    <property name="prefix" value="resources/WEB_INF/HTMLMailTemplates/XXXX/html/" />    <!-- <property name="templateMode" value="HTML5" /> -->    <property name="templateMode" value="LEGACYHTML5" />    <property name="characterEncoding" value="UTF-8" />    <property name="order" value="1" /></bean>​

Sample this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Email With Inline Images</title>

    <style>
        body {
            background-image: url('https://dl.dropbox.com/s/XXXX/pageBackGround.gif');
            background-repeat: repeat;
            margin:0;
            outline:0;
        }
        .pageContentWrapper {
            padding:10px;
            width: 100%;
            background-image: url('https://dl.dropbox.com/s/XXXX/smallerInlineImage.gif');
            background-repeat: repeat;
        }
        .smallerInlineImage {
            width: 22px;
            height: 22px;
            padding: 0 4px 6px 0;
            float: left;
        }
    </style>

</head>

<body>
    <div class="pageContentWrapper">
        <div class="smallerInlineImage">
            <img src="https://dl.dropboxusercontent.com/s/3ydel6zp53pb65b/smallerInlineImage.png" height="22" width="22">
        </div>
    </div>
</body>

JavaScript
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Email With Inline Images</title>​    <style>        body {            background-image: url('https://dl.dropbox.com/s/XXXX/pageBackGround.gif');            background-repeat: repeat;            margin:0;            outline:0;        }        .pageContentWrapper {            padding:10px;            width: 100%;            background-image: url('https://dl.dropbox.com/s/XXXX/smallerInlineImage.gif');            background-repeat: repeat;        }        .smallerInlineImage {            width: 22px;            height: 22px;            padding: 0 4px 6px 0;            float: left;        }    </style>​</head>​<body>    <div class="pageContentWrapper">        <div class="smallerInlineImage">            <img src="https://dl.dropboxusercontent.com/s/3ydel6zp53pb65b/smallerInlineImage.png" height="22" width="22">        </div>    </div></body>​

Service Class:

@Service
public class ThymeEmailService {

    @Autowired
    private JavaMailSender mailSender;

    @Autowired
    private TemplateEngine templateEngine;

    public void sendMailWithInline() throws MessagingException {

        final Context ctx = new Context();

        final MimeMessage mimeMessage = this.mailSender.createMimeMessage();
        final MimeMessageHelper message = new MimeMessageHelper(mimeMessage, true, "UTF-8");
        message.setSubject("Sample Email Subject");
        message.setFrom("senderEmail@yahoo.com");
        message.setTo("recipientEmail@yahoo.com");

        final String htmlContent = this.templateEngine.process("emailTemplate.html", ctx);
        message.setText(htmlContent, true);

        String[] attachments = {"C:\Users\MyPc\Dropbox\CV\myPDFAttachment.pdf"};

        for (String attachment : attachments) {
            FileSystemResource file = new FileSystemResource(attachment);
            message.addAttachment(file.getFilename(), file);
        }

        this.mailSender.send(mimeMessage);
    }
}

JavaScript
 
@Servicepublic class ThymeEmailService {​    @Autowired    private JavaMailSender mailSender;​    @Autowired    private TemplateEngine templateEngine;​    public void sendMailWithInline() throws MessagingException {​        final Context ctx = new Context();​        final MimeMessage mimeMessage = this.mailSender.createMimeMessage();        final MimeMessageHelper message = new MimeMessageHelper(mimeMessage, true, "UTF-8");        message.setSubject("Sample Email Subject");        message.setFrom("senderEmail@yahoo.com");        message.setTo("recipientEmail@yahoo.com");​        final String htmlContent = this.templateEngine.process("emailTemplate.html", ctx);        message.setText(htmlContent, true);​        String[] attachments = {"C:\Users\MyPc\Dropbox\CV\myPDFAttachment.pdf"};​        for (String attachment : attachments) {            FileSystemResource file = new FileSystemResource(attachment);            message.addAttachment(file.getFilename(), file);        }​        this.mailSender.send(mimeMessage);    }}​

Advertisement

Answer