在桌面和移动设备上切换图像以获取电子邮件 |邮递答案

【问题标题】：Switch Image on Desktop and Mobile for email | Mailjet在桌面和移动设备上切换图像以获取电子邮件 |邮递
【发布时间】：2020-09-01 12:57:23
【问题描述】：

我们正在改用 Mailjet API 来发送电子邮件。我们现在面临的一个问题：我们正在为 html body 使用 apache velocity 模板，我们在 html 的 src 标记中提供图像 url。但是由于明显的原因（图像大小等），我们为桌面、移动/ipad 提供了不同的图像

我们如何确定电子邮件何时在客户端设备上呈现哪个横幅。 mailjet 是否有任何切换图像功能？

提前致谢。

【问题讨论】：

不知道为什么这被否决了。我感觉合理。很快就会有答案..

标签： email html-email velocity mailjet velocity-template-language

【解决方案1】：

如果您需要交换图像，而不仅仅是缩小图像 (style="width:100%;height:auto;")，响应方式如下：

将此添加到您的 <head> 部分：

<style>
    @media screen and (max-width:620px) {
        .image_mobile {
            display:block!important; max-height: none !important; max-width:none !important; line-height: 1.5 !important;width:100%!important; height:auto!important;
        }
        .hide {
            display:none!important; width:0px!important; height: 0px!important; overflow:hidden!important; line-height: 0px!important; font-size:0px!important;
        }
    }
</style>

并将其放入您的内容中：

<img border="0" width="xxx" src="xxx" alt="xxx" style="display:block; outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;width:100%;height:auto;" class="hide">
<!--[if mso]><!-->
<div style="display:none; font-size:0; line-height:0;  max-height: 0; max-width: 0; width:0;" class="image_mobile">
    <img border="0" width="xxx" src="xxx" alt="xxx" style="display:none; font-size:0; line-height:0;max-height: 0; max-width: 0; width:0; -ms-interpolation-mode: bicubic;" class="image_mobile">
</div>
<!--<![endif]-->

默认情况下会显示第一张图片（台式机；网络邮件；不支持@media 的人）。但大多数移动应用都支持@media，因此会隐藏第一张图片，并显示第二张。

（因此，它不是 Mailjet 的功能，而是您的代码）

【讨论】：

感谢内森的回答。我会检查一下并很快回来。