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));
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);
}
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>
Advertisement
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>
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>
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);
}
}