Thymeleaf 不将所有图标附加到模板

Question

当我尝试在模板上生成带有图标的电子邮件时，我遇到了 Thymeleaf 的问题。我已按照文档建议的步骤操作See part 4.3，但在电子邮件中仅显示了 3 个图标中的 2 个。

首先我加载图标：

private byte[] loadImage(String path, String extension) {
    byte[] image = new byte[0];

    try {
        URL file = getClass().getClassLoader().getResource(path);
        BufferedImage buffer = ImageIO.read(file);
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        ImageIO.write(buffer, extension, outputStream);
        image = outputStream.toByteArray();
    } catch (IOException exception) {
        log.debug(exception.getLocalizedMessage());
    }

然后我将图标添加到MimeMessageHelper:

private void attachIcons(MimeMessageHelper message) {
    try {
        byte[] logoIconInBytes = loadImage(LOGO_ICON_PATH, "png");
        InputStreamSource logoImageSource = new ByteArrayResource(logoIconInBytes);
        message.addInline(LOGO_IMAGE_RESOURCE, logoImageSource, IMAGE_CONTENT_TYPE);
        byte[] phoneIconInBytes = loadImage(PHONE_ICON_PATH, "png");
        InputStreamSource phoneImageSource = new ByteArrayResource(phoneIconInBytes);
        message.addInline(PHONE_IMAGE_RESOURCE, phoneImageSource, IMAGE_CONTENT_TYPE);
        byte[] emailIconInBytes = loadImage(EMAIL_ICON_PATH, "png");
        InputStreamSource emailImageSource = new ByteArrayResource(emailIconInBytes);
        message.addInline(EMAIL_IMAGE_RESOURCE, emailImageSource, IMAGE_CONTENT_TYPE);
    } catch (MessagingException exception) {
        log.debug(exception.getLocalizedMessage());
    }
}

地点：

private static final String LOGO_ICON_PATH = "data" + File.separator + "logo_example.png";
private static final String PHONE_ICON_PATH = "data" + File.separator + "phone.png";
private static final String EMAIL_ICON_PATH = "data" + File.separator + "email.png";
private static final String IMAGE_CONTENT_TYPE = "image/png";

然后，我在发送电子邮件之前在context 上设置变量：

......
context.setVariable(LOGO_IMAGE_RESOURCE, LOGO_IMAGE_RESOURCE);
context.setVariable(PHONE_IMAGE_RESOURCE, PHONE_IMAGE_RESOURCE);
context.setVariable(EMAIL_IMAGE_RESOURCE, EMAIL_IMAGE_RESOURCE);
String content = templateEngine.process(templateName, context);
......

在模板上，我将变量分别称为<img>：

....
<img class="resize" th:src="|cid:${logoIcon}|" alt="Test">
....
<td class="someCssClass"> <img th:src="|cid:${phoneIcon}|" alt="phone"> </td>
<td class="someCssClass"> <img th:src="|cid:${emailIcon}|" alt="email"> </td>
....

但是 email 图标没有显示，使用 Firefox 开发工具检查 DOM 我发现了这个：

您可以看到 Logo 和 Phone 图标已附加，但 Email 图标未附加。

我改变了图标，认为文件可能已损坏但没有任何改变。

问题出在哪里？

问候。

Answer 1

好吧，我偶然发现了这个问题。我不知道这是一个错误还是因为我不知道如何使用 API，但这是正在发生的奇怪事情：

当我添加图标时：

byte[] logoIconInBytes = loadImage(LOGO_ICON_PATH, "png");
InputStreamSource logoImageSource = new ByteArrayResource(logoIconInBytes);
message.addInline(LOGO_IMAGE_RESOURCE, logoImageSource, IMAGE_CONTENT_TYPE);
byte[] phoneIconInBytes = loadImage(PHONE_ICON_PATH, "png");
InputStreamSource phoneImageSource = new ByteArrayResource(phoneIconInBytes);
message.addInline(PHONE_IMAGE_RESOURCE, phoneImageSource, IMAGE_CONTENT_TYPE);
byte[] emailIconInBytes = loadImage(EMAIL_ICON_PATH, "png");
InputStreamSource emailImageSource = new ByteArrayResource(emailIconInBytes);
message.addInline(EMAIL_IMAGE_RESOURCE, emailImageSource, IMAGE_CONTENT_TYPE);

我删除了电子邮件代码行以重新编写它们以防出现任何错误。

byte[] logoIconInBytes = loadImage(LOGO_ICON_PATH, "png");
InputStreamSource logoImageSource = new ByteArrayResource(logoIconInBytes);
message.addInline(LOGO_IMAGE_RESOURCE, logoImageSource, IMAGE_CONTENT_TYPE);
byte[] phoneIconInBytes = loadImage(PHONE_ICON_PATH, "png");
InputStreamSource phoneImageSource = new ByteArrayResource(phoneIconInBytes);
message.addInline(PHONE_IMAGE_RESOURCE, phoneImageSource, IMAGE_CONTENT_TYPE);

我偶然运行了应用程序并生成了电子邮件，但我注意到电话图标没有显示出来。我删除了电话图标并只加载了徽标，这次电子邮件上没有显示任何图标。

因此，解决方案是在加载所有图标后添加虚拟内容以便显示。

byte[] logoIconInBytes = loadImage(LOGO_ICON_PATH, "png");
InputStreamSource logoImageSource = new ByteArrayResource(logoIconInBytes);
message.addInline(LOGO_IMAGE_RESOURCE, logoImageSource, IMAGE_CONTENT_TYPE);
byte[] phoneIconInBytes = loadImage(PHONE_ICON_PATH, "png");
InputStreamSource phoneImageSource = new ByteArrayResource(phoneIconInBytes);
message.addInline(PHONE_IMAGE_RESOURCE, phoneImageSource, IMAGE_CONTENT_TYPE);
byte[] emailIconInBytes = loadImage(EMAIL_ICON_PATH, "png");
InputStreamSource emailImageSource = new ByteArrayResource(emailIconInBytes);
message.addInline(EMAIL_IMAGE_RESOURCE, emailImageSource, IMAGE_CONTENT_TYPE);
// Dummy content that won't be displayed to make all previous icons visible on the email
message.addInline("emptyIcon", new ByteArrayResource(new byte[0]), IMAGE_CONTENT_TYPE);