Gmail 不会显示来自外部来源的图像或我的 HTML 电子邮件中的内联 Base64

问题描述 投票:0回答:2

我正在我的节点服务器中自动向我的用户发送一些 HTML 电子邮件通知,使用 Nodemailer 发送电子邮件以及我的一封“无回复”G Suite 电子邮件。

在我的节点服务器中,我根据内容和通知类型动态构建 HTML 电子邮件,在所有电子邮件中,我希望包含社交媒体图标、我的公司徽标(从我的服务器公共资产文件夹提供)以及其中一些电子邮件用于用户交互的内联 Base64 二维码。

在 Outlook 中,所有图像都完全可见,即使是 base64 图像,但当我尝试在 Gmail 中查看它时,它就是无法显示。这与 gmail 默认使用的代理有关,但我不明白为什么我的电子邮件会发生这种情况。

我收到了大量带有 Gmail 图像的 html 电子邮件,它们都工作得很好。

我已经做了很多研究,并遵循了与 gmail“图像”配置相关的所有提示,但没有任何效果。

我该怎么做才能让我的图像在 Gmail 中可见?

谢谢!

node.js email html-email nodemailer inline-images
2个回答
2
投票

Gmail、Yahoo 不支持 Base64 图像,并且在其他电子邮件客户端中存在问题。

让图像可见的最佳方法是远程托管图像并链接到它们。

举个例子:

<img src="https://via.placeholder.com/200x50" width="200" height="50" alt="alt_text" border="0" />

相对于:

<img alt="Embedded Image" src="data:image/png;base64,ieMailBoreGoWALLYNSUyEAAAEIEIO..." />

祝你好运。


0
投票

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

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图像,将其转换为二进制格式,并将它们作为内联图像嵌入到电子邮件内容中。

© www.soinside.com 2019 - 2024. All rights reserved.