如何使用 AWS SES 在 email 中将 base64 字符串显示为图像

Question

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

我能够在收件箱中收到 email，但如果在 html 中直接使用 base64 硬编码字符串，则只有传递 url 时图像无法正常工作。

我需要从 s3 获取图像并且该图像应该与 email 内联。

 "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 很大，而 email 仅支持 128MB 数据，正如我在云监视日志中发现的那样（我只能评论 AWS SES，不确定其他 email 客户端）

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

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

并在 index.js 中添加这些行

//这里我要调整图片的大小

const resizedImageFileBuffer = await sharp(imageFileBuffer).resize ({ width:200, height:200, fit: 'contain' }).toFormat('png').png({ quality:100, compressionLevel: 6 }).toBuffer( )

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