Every time a user is registered to my website, I would like to send an automatic email to him with
the logo of the company, this is how I did it but for some reason, the IMG doesn't show.
mailSender.sendEmail('donotreplay#example.co.il','example#mail.com', " Hey "
+userToCreate.ownerName+" , Welcome to Example",
`
<table>
<tr style="background:black"> <img src="img/logo.png"></tr>
<tr>Check If Image Works</tr>
</table>
`
)
in nodemailer configuration you must set attachment, example:
from: '"Orange Water" <123#orange.com>', // sender address
to: getEmail, // list of receivers
subject: subject,
html: data, // html body
attachments: [{
filename: 'image.png',
path: 'your path to image',
cid: 'unique#kreata.ee' //same cid value as in the html img src
}]
});
And in your html file, img src must the same cid which already declared in nodemailer configuration. example:
<p<img src="cid:unique#kreata.ee" width="100" height="100" </p>
Hope this help.
You have to set the full URL of the image in the src attribute.
<tr style="background:black"> <img src="https://yourdomain.com/img/logo.png"></tr>
Related
I am trying to send a link in email using mailgun but the anchor tag in html sent as plain text
mg.messages().send({
from: 'mohamed.salah678mo#gmail.com',
to: email,
subject: `${req.currentUser.courseId} results are published by ${req.currentUser.userName}`,
html: `<html>
<body>
<a href='localhost:5000/api/course-results'>results</a>
</body>
</html>
`
}, (error,body) =>{console.log(body.message)})
this returns the word result as a plain text not a clickable link
I have nodejs request which need to embed the image base 64 string in the email html template body using nodemailer
as per the documentation
https://nodemailer.com/message/embedded-images/#example
let message = {
html: 'Embedded image: <img src="cid:unique#nodemailer.com" alt="Red dot"/>',
attachments: [{
filename: 'image.png',
content:'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==',
cid: 'unique#nodemailer.com' //same cid value as in the html img src
}]
}
I tried sending the base64 attachment to nodemailer and htmlbody with image tag and it's cid,
but it shows broken image after receiving mail
Image base64 string using cid
but if i tried same with the, image URL then its that image showing properly in received mail
let message = {
html: 'Embedded image: <img src="cid:unique#nodemailer.com" alt="Red dot"/>',
attachments: [{
filename: 'image.png',
href: "https://upload.wikimedia.org/wikipedia/commons/5/57/Cumulus_Clouds_over_Yellow_Prairie2.jpg",
cid: 'unique#nodemailer.com' //same cid value as in the html img src
}]
}
Image href url with CID
Is there any workaround to handle same or any other syntactical changes needed to display base64 string?
I am trying to send a logo image in the HTML using sendGrid mailing service. I went through a lot of articles and tried a lot but still could not figure out on how to display inline image using content_id.
I went through following links but still could not make it work:
[Link1][1]: https://sendgrid.com/blog/embedding-images-emails-facts/
[Link2][2]: https://github.com/sendgrid/sendgrid-nodejs/issues/841
Few of the answers suggest to add image as a base64 string in HTML but that does not work with few web mailing clients.
Here is my code:
`
try
{
const msg = {
to: `${customerData.raw[0].invoicemail}`, // List of receivers email address
from : 'xxxx#xxx.com',
subject: `${subject}`, // Subject line
html: emailData, // HTML body content
attachments:
[
{filename:`${filename}`,content:invoice,type:"application/pdf"},
{filename:'logo.jpg',content:logoImageData,content_id:'logo',type:"image/jpg",disposition:"inline"}
],
}
sgMail.send(msg)
//return this.mailerService.sendEmail(msg)
}
catch
{
return false
}`
And here is the HTML block:
<img src = "content_id:logo" alt = "Logo Image" width=140 height=20>
Also, the image is being received as an attachment but is not displayed.
Sorry for the very late reply, I've also had trouble getting my image to display using SendGrid.
#Abhijeet, have you tried replacing src = "content_id:logo" with src="cid:logo"?
For other beginners, like myself, using SendGrid I will include the other steps that #Abhijeet already has done.
Upload and convert your image file to base64 (we'll call this logoImageData).
We want to replace the beginning of the base64 encoded image string using String.prototype.replace().
export const cleanLogoImageData = logoImageData.replace('data:image/jpeg;base64,' , '')
Now, in the attachments for mail data for SendGrid, you need to add these to your object: filename, content, contentType, content_id, and disposition.
const msg = {
attachments: [
{
filename: "logo.jpg",
content: cleanLogoImageData,
contentType: "image/jpeg",
content_id: "logo",
disposition: "inline",
},
],
}
content_id and disposition: "inline" are what got my logo to show.
Finally, in the html file holding your <img />, you must set the src as cid:logo or whatever your content_id is. And moreover, it's recommended to add align="top" and display: block in your img tag for better and consistent cross-platform email display of the image.
<img align="top"
style="display: block"
src="cid:logo"
alt="company logo"
/>
so I'm trying to pass the value of "x" here which will generate the random value.
<script>
var result = Math.random().toString(36).substring(2,5);
window.onload = function() {
document.getElementById("x").innerHTML=result;
}
</script>
I want to pass the value to my html code, in the mailto subject. so when people click the link, it will automatically open the default mail and send the email to info#legianbeachbali.com with the subject "Special Promotion + (random code)"
<p style="color: #5b5b5b; text-align: left; id: x;">
<a title="Book Now" href="mailto:info#legianbeachbali.com?subject=Special%20Promotion%20"+x>Book Directly with Us</a></p>
I tried to call the value on id and put "x" in the subject but as I expected, it doesn't work. could you guys please help me? I need to know how to show the value in the subject email.
Thanks in advance.
First remove + x from your HTML i.e, href attribute of your a tag.
Then add id to you a tag mailTo in this case (as shown below).
$(function() {
var result = Math.random().toString(36).substring(2,5);
var href = $("#mailTo").attr('href')
var newHref = href + result
$("#mailTo").attr("href", newHref)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a title="Book Now" id='mailTo' href="mailto:info#legianbeachbali.com?subject=Special%20Promotion%20">Book Directly with Us</a></p>
I'am a newbie of Nodejs world. I want to send an email with embedded image. But my image didn't show in email. I thought it might be about my file path setting. Here is my mailOptions,
var mailOptions = {
from: 'mymail#gmail.com',
to: to,
subject: subject,
html: html,
attachments: [{
filename: "logo.png",
filePath: "/images/logo.png",
cid: "logo-mail"
}]
};
And my directory that keeps my static files is
myproject/
assets/
images/
js/
styles/
And this is my html,
<img src="cid:logo-mail" />
Here is my result in an email,
<img src="cid.php?mid=e_ZGHjAQV4ZQLlAGNkZQNjZGN1AQt3Zt==&pj=logo-mail" alt="cid.php?mid=e_ZGHjAQV4ZQLlAGNkZQNjZGN1AQ">
I am not sure that am I right to set file path like this ?
filePath: "/images/logo.png"
I did like this
filePath: process.cwd() + "/assets/images/logo.png"
And now it's working !
Thanks everyone for helping.
You need full path to your image
http://www.example.com/images/logo.png
since i could read your email on gmail.com the relative path would be translated to
gmail.com/images/logo.png