在 node.js 中使用 sendgrid 在电子邮件中发送嵌入图像

Question

我想使用 sendgrid 从节点 js 发送带有嵌入图像的电子邮件。我使用以下代码

var base64Img = require('base64-img');
const sgMail = require('@sendgrid/mail');
var base64str = base64_encode("logo.png");

function base64_encode(file) {
  var bitmap = fs.readFileSync(file);
  return new Buffer(bitmap).toString("base64");
}
sendMail(["[email protected]"],base64str);
function sendMail(emails,data)
{
sendgrid.send({
      to: emails[0],
      from: '[email protected]',
      subject: 'Test Mail',
      attachments: [
       {
        filename: "logo.png",
        type : "image/png",
        content: data,
        content_id: "myimagecid",
        disposition : "inline"
       }
     ],
       html:"Please look on the image <img src='content_id:myimagecid'  alt='no image found'/>",

  }, function (err) {
    if (err) {
      response.json({ message: 'Selected but Mail not sended and Error is'+err });
      console.log("Mail error",err);

    } else {
      console.log("Success Mail sended ");
      response.json({ message: 'Selected and Mail sended' });
    }
  });

}

这里我使用了disposition : "inline" 但图像仍然作为附件发送。谁能帮帮我吗？

Answer 1

您将文件定义为附件，因此它最终就是这样。 相反，您需要将其定义为一个文件，然后在您的 html 代码中调用它。

如果你通读这篇文章...

https://sendgrid.com/blog/embedding-images-emails-facts/ ,

...你会发现这实际上不是推荐的方法。相反，您可能希望将 base64 图像直接嵌入到您的 html 中。

Answer 2

如果有人仍在努力发送动态图像（图像随您发送的每封电子邮件而变化，例如：可能是一些个性化图像或具有某些链接的 QR 图像），您可以使用 Sendgrid 文章 中提到的第三步。以下是一些示例代码片段的步骤（我正在发送带有一些邀请链接的 QR 图像）：

[注意：这仅适用于您要将图像嵌入电子邮件正文中的情况。否则你可以将它作为附件传递，Gmail 可以加载 base64 编码的附件！]

1. 将生成的图像上传到一些存储服务，如 S3 或 dropbox

 const base64EncodedQRCode = await this.qrCodeService.generateQRCode(payload.inviteUrl);
const buffer = Buffer.from(base64EncodedQRCode.replace(/^data:image\/\w+;base64,/, ""), "base64");

await this.s3Service.uploadToS3(folderPath, fileName, buffer, "base64", "image/png");

2. 如果您在 sendgrid 请求中传递 html，请添加带有上传图片 url 的

   img

   标签

await sendgrid.send({
      to: payload.email,
      from: SENDER_EMAIL,
      subject: 'Test Mail',
       html:"Please look on the image <img src='https://<bucketName>.s3.amazonaws.com/<folderPath>/<fileName>.png'  alt='no image found'/>",

  });

3. 如果您使用的是模板，请在模板中添加一块图像并保持 src 动态。

await sendgrid.send({
      to: payload.email,
      from: SENDER_EMAIL,
      templateId: templateID,
      dynamicTemplateData: {
        qrCodeImageUrl: "https://<bucketName>.s3.amazonaws.com/<folderPath>/<fileName>.png",
      },
    })

<td style="font-size:6px; line-height:10px; padding:0px 0px 0px 0px;" valign="top" align="center"><img class="max-width" border="0" style="display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:50% !important; width:50%; height:auto !important;" width="300" alt="" data-proportionally-constrained="true" data-responsive="true" src="{{qrCodeImageUrl}}"></td>

Answer 3

如果你没有很多图片，你可以使用

Inline Embedding

<img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgACAESAAMAENkDZ5u8/61a+X...more encoding" />