如何使用 AWS SES 在电子邮件中将 base64 字符串显示为图像答案

【问题标题】：How to display base64 string as image in email, using AWS SES如何使用 AWS SES 在电子邮件中将 base64 字符串显示为图像
【发布时间】：2022-02-15 01:22:29
【问题描述】：

我正在尝试在我的电子邮件中显示图像。但是该图像没有显示。我正在使用从 S3 存储桶中获取的 base64 字符串。

我可以在收件箱中收到电子邮件，但只有图像在传递 url 时不起作用，如果直接在 html 中使用 base64 硬编码字符串它可以工作。

我需要从 s3 获取图像，并且该图像应该与电子邮件内联。

"use strict";
const fs = require("fs");
const path = require("path")
const Handlebars = require('handlebars');
const {SESClient, sendEmailCommand} = require("@aws-sdk/client-ses");
const {S3Client, GetObjectCommand} = require("@aws-sdk/client-s3");

let S3=null, SES=null;

const streamToBuffer = async(stream) =>{
  return new Promise((resolve, reject) =>{
    const chunks = [];
    stream.on("data", (chunk) =>{chunks.push(chunk)});
    stream.on("error", reject);
    stream.on("end", () =>{resolve(Buffer.conact(chunks))});
  })
}


export.handler = async(event) =>{
  if(S3 === null){
    S3 = new S3Client ({region: MY_REGION})
  }
  
  if(SES === null){
    SES = new SESClient ({region: MY_REGION})
  }
  try{
   let deatils = event.detail.fullDocument;
   
   let imageKey = `${deatils.dir}/myimage.png`;
   
   let imageFileFromS3 = await S3.send(
                         new GetObjectCommand({
                         Bucket: MY_BUCKET_NAME, key: imageKey 
                         }))
   let imageFileBuffer = await streamToBuffer(imageFileFromS3.Body)
   let bufferToBase64 = imageFileBuffer.toString("base64");
   
   const emailSubject = "Hey!! Test mail with image";
   const emailData = {
    Name: "Email Tester"
    ImageSrc: `data:image/png;base64, ${bufferToBase64}`
   }
   
   let htmlTemplate =       Handlebars.complie(fs.readFileSync(path.join(__dirname, 'templateSrc', email.html)).toString())
   
   let textTemplate = Handlebars.complie(fs.readFileSync(path.join(__dirname, 'templateSrc', email.txt)).toString())
   
   let emailResult = await SES.send( new SendEmailCommand({
    Source: "Source_test@email.com", //dummy email for now
    Destination :{
      ToAddress: ["to_test@email.com"] // dummy address 
    },
    Message: {
      Subject: {
        Charset: 'UTF-8',
        Data: emailSubject
      },
      Body: {
        Text: {
          Charset: 'UTF-8',
          Data: textTemplate(emailData)
        },
        Html:{
          Charset: 'UTF-8',
          Data: htmlTemplate(emailData)
        }
      }
    }
   }))
   return emailResult
  }catch(error){
    console.log(error)
  }
  
  
}

email.txt

Dear {{Name}}

Thanks for asking images on email.

Please find your requested images below
   
 Face image

 Bus image

   -----Thanks

Email.html

<h1>Dear {{Name}}</h1>
<p>Thanks for asking images on email.</p>
<p>Please find your requested image below</p>

 <p>face Image</p>
 <img src={{ImageSrc}} />

  <p>Bus Image</p>
<img src="data:image/gif;base64,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">

//This image is working
 
<p>-------Thanks</p>

【问题讨论】：

你对比过html吗？有什么区别？
只有使用图像的方式不同..第一个来自S3，第二个是带有base64字符串的Direct url
我不明白。请比较两封邮件的完整 html。然后粘贴差异。
没有其他html。我正在使用相同的 html... 在 html 中有两张图片，一张图片正在显示，另一张没有。正在工作的那个是硬编码的。在代码模板中，我添加了电子邮件。请查看带有图像标签的内联 cmets
我明白这一点，但是在处理完您的模板后，将不再有{{Name}} 和{{ImageSrc}}，但输出将是一些html。我想看看这个输出。如果在 html 中 {{Name}} 和 {{ImageSrc}} 都没有被实际内容取代，那么您的模板似乎有问题

标签： node.js amazon-web-services amazon-ses

【解决方案1】：

我刚刚解决了这个问题... 所以我想，关于发布答案以供他人帮助。

造成这种情况的根本原因是 - 我的缓冲区响应表单 S3 的大小很大，并且电子邮件仅支持 128MB 数据，正如我在云观察日志中发现的那样（我只能评论 AWS SES，不确定其他电子邮件客户端）

所以我的问题的最终解决方案是调整缓冲区响应的大小，我们从 S2 获得。

所以我用了尖锐的https://www.npmjs.com/package/sharp

并在 index.js 中添加这些行

//这里我会调整图片大小

const resizedImageFileBuffer = 等待尖锐（imageFileBuffer） .resize ({ 宽度：200，高度：200，适合：'包含' }) .toFormat('png') .png({ 质量：100，压缩等级：6 }) .toBuffer()

//现在我们将调整大小的缓冲区转换为base64 让 bufferToBase64 = resizedImageFileBuffer.toString("base64");

【讨论】：