Base64 图像无法在 Gmail 和 Outlook 中呈现

Question

我们使用 SendGrid 向所有平台发送电子邮件，即 Gmail、Outlook 等。

还使用SendGrid动态模板设计了电子邮件模板。

我们有 Base64 图像，并在电子邮件模板中使用了它。但是，图像未在 SendGrid 电子邮件模板中呈现。

此外，我们还通过将邮件发送到 Gmail 和 Outlook 进行了测试，但是，base64 图像也未呈现。

由于图像没有上传到任何地方，编辑器将图像保存为base64编码的图像。

<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFKCAIAAADKUQaBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhepP1p32zb"/>

请问有人可以向我建议在所有平台 Gmail、Outlook、SendGrid 等的电子邮件模板中渲染 Base64 图像的解决方案吗？

Answer 1

Outlook 不支持 Base64 图像。相反，您需要通过附加文件来嵌入图像，然后使用消息正文中的

cid:

属性引用它。

Answer 2

在尝试发送带有嵌入图像的电子邮件时，我遇到了许多挑战，特别是当这些图像采用 Base64 格式时。许多电子邮件客户端（包括 Gmail）不直接支持 Base64 图像。经过大量研究和实验，我终于找到了一个非常有效的解决方案：

https://www.labnol.org/gmail-base64-images-231026

这是一个通用的 PHP 解决方案，使用 PHPMailer 将 base64 图像转换为 blob 并将其嵌入到电子邮件中：使用 PHPMailer 的通用 PHP 解决方案

php代码：

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'path/to/PHPMailer/src/Exception.php';
require 'path/to/PHPMailer/src/PHPMailer.php';
require 'path/to/PHPMailer/src/SMTP.php';

// Your email setup
$mail = new PHPMailer(true);

try {
    // SMTP configuration
    $mail->isSMTP();
    $mail->Host = 'smtp.example.com';
    $mail->SMTPAuth = true;
    $mail->Username = '[email protected]';
    $mail->Password = 'your-email-password';
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;
    $mail->Port = 465;

    // Recipients
    $mail->setFrom('[email protected]', 'Your Name');
    $mail->addAddress('[email protected]');

    // Subject
    $mail->Subject = 'Your Subject';

    // HTML content with base64 image
    $htmlContent = '<html><body><p>Hello,</p><img src="data:image/png;base64,YOUR_BASE64_IMAGE_HERE" /></body></html>';

    // Convert base64 images to blobs and embed them as inline images
    $htmlBody = $htmlContent;
    $inlineImages = [];
    preg_match_all('/<img src="data:image\/(png|jpeg|gif);base64,([^"]+)"[^>]*>/i', $htmlBody, $matches);
    foreach ($matches[0] as $index => $base64ImageTag) {
        $format = $matches[1][$index];
        $base64Data = $matches[2][$index];
        $imageByte = base64_decode($base64Data);
        $imageName = uniqid();
        $imageBlob = new \stdClass();
        $imageBlob->data = $imageByte;
        $imageBlob->type = "image/$format";
        $newImageTag = str_replace("src=\"data:image/{$format};base64,{$base64Data}\"", "src=\"cid:$imageName\"", $base64ImageTag);
        $htmlBody = str_replace($base64ImageTag, $newImageTag, $htmlBody);
        $inlineImages[$imageName] = $imageBlob;
    }

    $mail->Body = $htmlBody;

    foreach ($inlineImages as $imageName => $imageBlob) {
        $mail->addStringEmbeddedImage($imageBlob->data, $imageName, $imageName, 'base64', $imageBlob->type);
    }

    $mail->send();
    echo 'Message has been sent';
} catch (Exception $e) {
    echo "Message could not be sent. Mailer Error: {$mail->ErrorInfo}";
}

关键步骤：

**Identify Base64 Images:**
    Use a regular expression to find all base64-encoded images in the HTML content.

**Convert Base64 to Blob:**
    Decode the base64 image data into binary format (blob).
    Generate a unique identifier for each image.

**Embed Images:**
    Replace the base64 image tags in the HTML content with cid tags.
    Add the binary images to the email as inline attachments using addStringEmbeddedImage.

适应： 该方法可以适用于其他编程语言和电子邮件库（如Java的JavaMail、Python的smtplib等），通过使用类似的步骤解码base64图像，将其转换为二进制格式，并将它们作为内联图像嵌入到电子邮件内容中。

Answer 3

你正在做的事情很好。问题是你的图像是单色的，而且颜色是透明的。

如果您创建此 html 文件并在浏览器中打开它，您可以验证这一点：

<body style="background-color:green;">
Text before
<img style="border:1px solid black;" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFKCAIAAADKUQaBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhepP1p32zb"/>
Text after
</body>

Base64 图像无法在 Gmail 和 Outlook 中呈现

问题描述投票：0回答：3

3个回答

最新问题

Base64 图像无法在 Gmail 和 Outlook 中呈现

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3