现在我正在使用nodemailer和email-templates来完成这项工作,但我无法在后台设计带有图像和徽标的模板。我也读过关于sendgrid的内容,但我不知道如何传输图像。 对我应该寻找的任何帮助或想法
答案 0 :(得分:2)
我认为您正在寻找将图像嵌入到电子邮件模板中。您可以使用简单的HTML,内联CSS和表格布局来设计电子邮件模板以及nodemailer。 我使用过Node.js和Express.js框架。
router.get('/api/check',function(req,res){
var user = "Saurabh";
var transporter = nodemailer.createTransport({
service: 'Gmail',
auth:{
user:config.central_email,
pass:config.central_email_password
}
});
var MailOptions = {
from: 'Johnson Tiles<apps@hrjindia.in>',
to: 'saurabh@sattvarise.com',
subject:'Welcome to Sattvarise Technologies - Augmented Reality Workshop',
text:'Welcome to Sattvarise Technologies. We offers market-leading expertise in the latest 3D, Augmented Reality and Virtual Reality for Android, iOS, Google Cardboard, GearVR and more.',
html:'<div style="margin:0;padding:0;background-color:#F8F8F8;border:1px solid #ddd"> <img src="cid:image1@johnson.com" width="100%"> <div style="height:1%;"></div> <div style="border-radius:5px;text-align:justify;padding:15px;box-shadow: 0px 0px 10px 1px #888888;background-color:#FFF;margin:0 auto;font:16px Helvetica,Arial,sans-serif;line-height:1.5;color:#848484;"> <b>Hello '+user+',</b><br> Welcome to Sattvarise Technologies. We offers market-leading expertise in the latest 3D, Augmented Reality and Virtual Reality for Android, iOS, Google Cardboard, GearVR and more.. <br><br> <table border="0" cellspacing="0" cellpadding="0" style="margin:0 auto;border-bottom:1px solid #cee3ed;padding:0;background-color:rgba(236,240,241,0.3);"> <caption style="font-size:20px;color:#005999;font-weight:bold;background:rgba(236,240,241,0.3);border-top:1px solid #cee3ed;">How to use</caption> <tbody> <tr> <td width="60"></td> <td width="160" valign="middle"> <div style="padding:0 0 0.5em;color:#699bbf;font:bold 16px Helvetica,Arial,sans-serif"><img style="border: 1px solid #cee3ed" src="cid:image2@johnson.com" width="130px"></div> </td> <td width="16"></td> <td width="364" valign="top" style="padding:1.5em 0"> <table cellpadding="0" cellspacing="0" border="0" style="margin:0;border:0;padding:0;color:#8d9ba6;font:15px Helvetica,Arial,sans-serif;line-height:1.5"> <tbody> <tr> <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">1.</td> <td valign="top" style="margin:0;padding:0 0 1.25em"> <span style="font-weight:bold;color:#005999" target="_blank"> Download Android app from google play store</span><br> <span style="font-size:13px"><a href="#" style="color:inherit;">Play store link</a></span> </td> </tr> <tr> <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">2.</td> <td valign="top" style="margin:0;padding:0"> <span style="font-weight:bold;color:#005999" target="_blank">Download and Print</span><br> <span style="font-size:13px">Download and print adjacent image on A4 paper (Either Color/Black & White print).</span> </td> </tr> <tr> <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">3.</td> <td valign="top" style="margin:0;padding:0"> <span style="font-weight:bold;color:#005999" target="_blank">Place the Marker</span><br> <span style="font-size:13px">Place the printed image on the Floor</span> </td> </tr> <tr> <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">4.</td> <td valign="top" style="margin:0;padding:0"> <span style="font-weight:bold;color:#005999" target="_blank">Transform your space to luxury</span><br> <span style="font-size:13px">Open Johnson Tiles AR app and go to "Transform your space to luxury".</span> </td> </tr> <tr> <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">5.</td> <td valign="top" style="margin:0;padding:0"> <span style="font-weight:bold;color:#005999" target="_blank">Scan the Marker</span><br> <span style="font-size:13px">As camera feed opens in the app, scan the printed image and it will show tiles on top of it. </span> </td> </tr> <tr> <td width="24" valign="top" style="margin:0;padding:4px 0 0;font-weight:bold;color:#005999">6.</td> <td valign="top" style="margin:0;padding:0"> <span style="font-weight:bold;color:#005999" target="_blank">Select tiles from the catalogue</span><br> <span style="font-size:13px"> Use other features from the right panel for a complete experience.</span> </td> </tr> </tbody> </table> </td> <td width="60"></td> </tr> </tbody> </table> </div> <hr> <div style="height:3%;"></div> <div> <div style="height:90px;margin:0 auto;text-align:center;"> <span style="margin:0;border:0;padding:0;color:#8d9ba6;font:20px Helvetica,Arial,sans-serif;line-height:1.5;margin-right:50px;">Follow us on</span> <a href="http://www.youtube.com/hrjohnsonindia1" target="_blank"><img width="28px" src="cid:image3@johnson.com"></a> <a href="https://twitter.com/Hrjohnsonindia" target="_blank"><img width="28px" src="cid:image4@johnson.com"></a> <a href="https://www.facebook.com/HRJIndia" target="_blank"><img width="28px" src="cid:image5@johnson.com"></a><br> <div style="height:15px;"></div> <a style="color:#E42C33;padding:5px;background:#F8F8F8;" href="http://www.hrjohnsonindia.com/" target="_blank">http://www.hrjohnsonindia.com/</a> </div> </div></div>',
attachments:[{
filename : 'kat-banner-bg.jpg',
path: './public/images/kat-banner-bg.jpg',
cid : 'image1@johnson.com'
},
{
filename : 'FINAL_MARKER.jpg',
path: './public/images/FINAL_MARKER.jpg',
cid : 'image2@johnson.com'
},
{
filename : 'youtube.png',
path: './public/images/youtube.png',
cid : 'image3@johnson.com'
},
{
filename : 'twitter.png',
path: './public/images/twitter.png',
cid : 'image4@johnson.com'
},
{
filename : 'facebook.png',
path: './public/images/facebook.png',
cid : 'image5@johnson.com'
},
{
filename : 'JOHNSON_MARKER.jpg',
path: './public/images/FINAL_MARKER.jpg',
}]
}
transporter.sendMail(MailOptions,function(error,info){
if(error){
console.log('Email Error '+error);
}
else{
console.log('Email Sent to user '+info.response);
res.json({Message : "Email is sent to user"});
}
});
});
在上面的例子中,所有图像都在express.js框架的公共文件夹中。 在附件选项中,您需要传递要嵌入电子邮件中的图像数组。 cid 用于嵌入图片。 示例:
{
filename : 'facebook.png',
path: './public/images/facebook.png',
cid : 'image5@johnson.com'
}
并在nodemailer中使用该图像
<img width="28px" src="cid:image5@johnson.com">
答案 1 :(得分:1)
我应该寻找的任何帮助或想法
查找HTML电子邮件模板。设计HTML电子邮件与为网站设计HTML完全不同。对于电子邮件,您经常需要使用表格进行布局以及在网页设计中遗忘的其他技巧。查找HTML电子邮件模板,阅读HTML电子邮件格式,如果一切都失败,那么您可能需要在某些情况下将文本放入图像中。