【发布时间】：2019-01-15 09:41:26
【问题描述】：
我一直在为电子邮件模板和图片而苦苦挣扎。 我已经成功地使图像出现在邮件中，但它们没有考虑 css。
后端/弹簧：
这是一个用于发送邮件的简单 Spring 服务。
import org.springframework.mail.javamail.JavaMailSender;
import javax.mail.MessagingException;
import javax.mail.internet.MimeMessage;
import freemarker.template.Configuration;
import freemarker.template.Template;
import freemarker.template.TemplateException;
private JavaMailSender emailSender;
@Autowired
private Configuration freemarkerConfig;
public void sendResetPassword(Utilisateur utilisateur, String password) throws MessagingException {
String title = messageService.getMessage("user.mail.resetpassword.title");
String titleStrong = messageService.getMessage("user.mail.resetpassword.titleStrong");
String logoImg = imgPath+"/mail/mail_password.png";
Map<String, Object> templateVars = new HashMap<>();
templateVars.put("subject", title + " " + titleStrong);
templateVars.put("title", title);
templateVars.put("logo",logoImg);
templateVars.put("titleStrong", titleStrong);
templateVars.put("password", password);
String sendTo = "";
for(String recep : mailService.getRecipientsFromString(utilisateur.getEmail())) {sendTo=recep;break;}
this.sendMail("reset_password.html",templateVars,Arrays.asList(logoImg),sendTo,title+" "+titleStrong);
}
private void sendMail(String tmplName,Map<String,Object> vars,Collection<String> imgs,String recepient,String subject) {
MimeMessageHelper messageHelper = this.getMailHelper();
try {
messageHelper.addTo(recepient);
messageHelper.setSubject(subject);
messageHelper.setFrom(from);
messageHelper.setReplyTo(replyTo);
this.initTemplateForGeneralInfos().entrySet().forEach(e -> vars.put(e.getKey(), e.getValue()));
Template template = freemarkerConfig.getTemplate(tmplName, Locale.FRENCH, "UTF-8");
String processedTemplate = FreeMarkerTemplateUtils.processTemplateIntoString(template, vars);
messageHelper.setText(processedTemplate, true);
globalImgs.forEach(str -> {
try { messageHelper.addInline(str, new ClassPathResource(str)); } catch (MessagingException e) {
throw new IllegalArgumentException("Error while processing image ["+str+"] in template " + tmplName, e);
}
});
imgs.forEach(str -> {
try { messageHelper.addInline(str, new ClassPathResource(str)); } catch (MessagingException e) {
throw new IllegalArgumentException("Error while processing image ["+str+"] in template " + tmplName, e);
}
});
messageHelper.addInline("globalLogo.png", new ClassPathResource(imgPath+"/logo/globalLogo.png"));
} catch (IOException e) {
throw new IllegalArgumentException("Template " + tmplName + " not found or unreadable", e);
} catch (TemplateException e) {
throw new IllegalArgumentException("Error while processing template " + tmplName, e);
} catch (MessagingException e) {
throw new IllegalArgumentException(e);
}
emailSender.send(messageHelper.getMimeMessage());
}
HTML 模板：
<#macro layout subject>
<!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>
<title>${subject}</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width">
<style type="text/css">
/* Fonts and Content */
body,
td {
font-family: 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
font-size: 14px;
}
body {
background-color: #F2F2F2;
margin: 0;
padding: 0;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
}
.highlight {
color: #58CB7E;
font-size: 22px;
}
.small {
color: #9B9B9B;
font-size: 12px
}
@media only screen and (max-width: 480px) {
img {
height: auto;
}
}
p {
padding-bottom: 0.5em;
}
#body,
#footer {
background-color: white;
}
</style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust: none;">
<table style="border-spacing: 0; margin:0 5em">
<tbody>
<tr>
<td><img id="logo" src="cid:globalLogo.png" style="display: block; margin: auto; padding: 50px 0;" /></td>
</tr>
<tr>
<td id="header" style="color: white;
text-align: center;
background-color: #92D051;
color: white;
padding-top: 15px;
padding-bottom: 35px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 22px;">
<img src="cid:${logo}" style="display: block; margin: auto; padding: 30px 0;" />
<span>${title} <b style="text-transform: uppercase;">${titleStrong}</b></span>
</td>
</tr>
<tr>
<td id="body" style="font-size: 18px; padding: 1em 5em; background-color: white;">
<#nested />
</td>
</tr>
<tr>
<td id="ecos" style="justify-content: space-around; display: flex; padding-bottom: 20px;background-color: white;">
<#list globalImgs as source>
<img src="cid:${source}" style="height: 30px; padding: 0 1em;" />
</#list>
</td>
</tr>
<tr>
<td id="copyright" style="background-color: #273826;
color: white;
text-align: center;
padding: 35px;
letter-spacing: 1px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;">Company
⋅ Copyright © ${date?string.yyyy}</td>
</tr>
</tbody>
</table>
</body>
</html>
</#macro>
所以问题在于使用 Outlook 时，该样式似乎不适用于图像。然而，它适用于雷鸟。 所以我猜 Outlook 是在样式之后加载图像..？你们有任何关于这方面的信息吗？你们有解决这个问题的办法吗？
谢谢！
【问题讨论】：
标签： html spring email templates freemarker