Question

我一直在努力处理电子邮件模板和图像。我已经成功地使图像显示在邮件中，但是它们没有考虑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
                        &sdot; Copyright &copy; ${date?string.yyyy}</td>
                </tr>
            </tbody>
        </table>
    </body>

    </html>
</#macro>

所以问题在于，使用Outlook时，样式似乎不适用于图像。但是，它与雷鸟配合使用效果很好。因此，我认为Outlook会在样式之后加载图像。你们有关于此的任何信息吗，并且您有针对此问题的任何修复程序吗？

谢谢！

Answer 1

Outlook会忽略应用于padding的{{1}}和margin。

解决方案是将img应用于图像周围的padding。

td

祝你好运。

电子邮件模板：freemarker，春季，前景和图片问题

1 个答案: