node.js - nodejs在后台发送带有图像的邮件

标签 node.js email

我想发送类似这样的邮件 enter image description here

现在我正在使用 nodemailer 和电子邮件模板来完成这项工作,但我无法设计一个背景带有图像和 Logo 的模板。我还阅读了有关 sendgrid 的内容,但我不知道如何传输图像。 关于我应该寻找什么的任何帮助或想法

最佳答案

我认为您正在寻找将图像嵌入到电子邮件模板中。您可以使用简单的 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>      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://twitter.com/Hrjohnsonindia" target="_blank"><img width="28px" src="cid:image4@johnson.com"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<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框架的public文件夹中。 在附件选项中,您需要传递要嵌入电子邮件中的图像数组。 cid 用于嵌入图像。 示例:

{
       filename : 'facebook.png',
       path: './public/images/facebook.png',
       cid : 'image5@johnson.com'
}

并在nodemailer中使用该图像

<img width="28px" src="cid:image5@johnson.com">

关于node.js - nodejs在后台发送带有图像的邮件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42222967/

相关文章:

node.js - Node JS 中的最大可写流

c# - C# 和 Node JS 中的 TripleDES 加密结果不同

javascript - 来自 JavaScript 登录信息的 Neo4j

Facebook API : is it possible to get a user's public profile data by email address?

php - 如何摆脱 PHP 的 imap_fetchstructure() 的错误消息?

email - 如何在 odoo 的电子邮件模板中放置指向 View 的链接

python - 我无法使用 python 在电子邮件正文中添加图片,我可以添加图片作为附件,但我想要一个代码来在邮件正文中添加图片

html - 如何在我的 HTML 电子邮件中包含图像?

node.js - 如何在没有 npm 的情况下在 node.exe 中加载 socket.io?

javascript - 如何在 Jest 中模拟 Mongoose 'find()' 函数?