Ich mag das Versenden von Mail senden simething wie diese 
NodeJS Mails mit Bildern im Hintergrund
Im Moment bin ich mit nodemailer und E-Mail-Vorlagen die Arbeit zu tun, aber ich bin nicht in der Lage eine Vorlage mit einem Bild zu entwerfen und ein Logo im Hintergrund. Ich lese auch über sendgrid, aber ich weiß nicht, wie man ein Bild überträgt. Jede Hilfe oder Ideen, was ich für
Hilfe oder Ideen, was aussehen soll ich für
Geben Sie für HTML-E-Mail-Vorlagen aussehen sollte. Das Entwerfen von HTML-E-Mails unterscheidet sich erheblich von der Gestaltung von HTML für Websites. Bei E-Mails müssen Sie häufig Tabellen für Layout- und andere Tricks verwenden, die im Webdesign vergessen wurden. Suchen Sie nach HTML-E-Mail-Vorlagen, lesen Sie über HTML-E-Mail-Formatierung, und wenn alles fehlschlägt, müssen Sie den Text möglicherweise für bestimmte Fälle in Bilder einfügen.
Ich denke, Sie suchen nach Bildern in E-Mail-Vorlage einbetten. Sie können dies mit einfachem HTML-, Inline-CSS- und Tabellenlayout zum Entwerfen einer E-Mail-Vorlage zusammen mit dem Knotenmailer tun. Ich habe Node.js und Express.js Framework verwendet.
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<[email protected]>',
to: '[email protected]',
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:[email protected]" 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:[email protected]" 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:[email protected]"></a> <a href="https://twitter.com/Hrjohnsonindia" target="_blank"><img width="28px" src="cid:[email protected]"></a> <a href="https://www.facebook.com/HRJIndia" target="_blank"><img width="28px" src="cid:[email protected]"></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 : '[email protected]'
},
{
filename : 'FINAL_MARKER.jpg',
path: './public/images/FINAL_MARKER.jpg',
cid : '[email protected]'
},
{
filename : 'youtube.png',
path: './public/images/youtube.png',
cid : '[email protected]'
},
{
filename : 'twitter.png',
path: './public/images/twitter.png',
cid : '[email protected]'
},
{
filename : 'facebook.png',
path: './public/images/facebook.png',
cid : '[email protected]'
},
{
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"});
}
});
});
Im obigen Beispiel befinden sich alle Bilder im öffentlichen Ordner des express.js-Frameworks. In Anhänge Option, müssen Sie Array von Bildern übergeben, die in E-Mail eingebettet werden. cid wird zum Einbetten von Bildern verwendet. Beispiel:
{
filename : 'facebook.png',
path: './public/images/facebook.png',
cid : '[email protected]'
}
und dieses Bild zu verwenden, in nodemailer Verwendung
<img width="28px" src="cid:[email protected]">
tun müssen wir die gleiche Namensgebung „cid“ Namen wie eine E-Mail folgen? –
Nein, es ist nicht erforderlich, "cid" wie email_id zu benennen, Sie können es wie "image1" benennen. Es ist wie eine Variable für ein Bild, das als Quelle in einer HTML-Vorlage verwendet wird. –