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

Question

我想在我的电子邮件中显示图片。但是该图像没有显示。我正在使用从 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>

Answer 1

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

根本原因是-我的缓冲区响应表单 S3 很大，电子邮件只支持 128MB 数据，正如我在云监视日志中发现的那样（我只能评论 AWS SES，不确定其他电子邮件客户端)

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

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

并在 index.js

中添加这些行

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

const resizedImageFileBuffer = 等待夏普（imageFileBuffer） .调整大小（{ width:200, height:200, 适合：'contain' }) .toFormat('png') .png({ quality:100, 压缩级别：6 }) .toBuffer()

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

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

How to display base64 string as image in email, using AWS SES

amazon-web-services

node.js

amazon-ses