根据email客户端将图片显示从base64改为src

编程问答 2022-05-15

问题描述

我想在所有电子邮件客户端上查看电子邮件签名中的图像。 最初我使用经典创建了我的签名：

<img src="https://drive.google.com/uc?export=view&id=1e0siJmU...">

这对 gmail 和 Apple 邮件非常有效，但 Outlook 会出现问题，因为它不下载图像以确保安全。恼人的！我已经看到，如果通过 base64 代码嵌入图像，则 Outlook 桌面显示图像没有问题，如下所示：

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...

。然而，现在它在 gmail 中不起作用，因为它甚至不显示图像，因此不显示相关的社交链接。

所以我想到做一种 if 子句来识别客户端，并根据该子句编写我想要插入什么样的图像作为 background-image 应用于应用于 html body 的样式>

我在网络和堆栈上搜索了很多，发现很多文章都涉及conditional css，但没有一篇涉及图像更改

我决定使用 conditional css 并来了：

    <body>
   <!--[if mso]>
     <style type="text/css">
         #photo {
           background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/...');
           background-size:contain;
         }
     </style>
   <!--<![endif]-->
   <!--[if !mso]>
      <style type="text/css">
         #photo {
         background-image: url('https://drive.google.com/uc?export=view&id=1e0siJmU...');
         background-size:contain;
         }
      </style>
   <!--<![endif]-->
    <img id="photo">
    </body>

但不幸的是它不起作用。提示？谢谢！

解决方法

签名本质上是在每次使用时被转发。我猜想在初始发送时甚至在导入和设置签名时都会剥离任何条件代码。肯定会进行某种类型的清理，以确保他们的用户不会尝试插入 Javascript 或任何其他恶意内容。

此外，Gmail 还具有阻止图像的方法，并且可以关闭 Outlook 选项以便下载图像。毫无疑问，其他电子邮件客户端也是如此。 从本质上讲，您永远找不到一种完整的证明方式来为每个人显示图像。我建议您尊重收件人的决定，只需构建一个按预期呈现的可靠签名。

gmailgmailhtml-emailoutlooksignaturesignature