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
Related
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"
/>
I have a static asset - png image. I was able to use it like:
<img class="navbar-brand" id="navbar-logo" src="#/assets/logo.png">
But I need it to be possible to replace after deployment. When I put image in public folder and use an absolute path vue application not shows image.
<img class="navbar-brand" id="navbar-logo" src="/logo.png">
The img tag presents on page and browser executes http call for image. The response code is 200 but response body is empty. The image file stored in public folder, which is in root folder of vue application. Actually even if I put in src attribute the name of image which not exist I get a 200 response code, which is strange.
I also have a router in my application and it seems to be working fine, but I not sure can it cause the problem or not:
export default new Router({
mode: 'history',
routes: [
{
path: '/:dataset([^/0-9]+?)',
name: 'introduction',
component: Introduction
},
{
path: '/:dataset([^/0-9]+?)/introduction',
name: 'introduction',
component: Introduction
},
{
path: '/:dataset([^/0-9]+?)/sample-data',
name: 'sample-data',
component: SampleData
},
{
path: '/404',
component: NotFound
},
{
path: '*',
component: NotFound
}
]
})
I run application on my workstation with
npm run dev
The vue version is:
front#1.0.0 /home/pm/git/showroom/front
└── vue#2.6.11
Please help to show image from public folder.
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>
Trying to send both text and image data as local variables to a server-side rendered page using templates.
I know I have to set the Content-Type as 'image/png'.
How can I set the Content-Type for one variable when all the other variables are text?
Thank you so much!
res.render('profile.html', { locals: {
tasks: tasks,
msgExists: '',
name: req.user.name,
email: req.user.email,
photo: req.user.photo //how to set Content-Type for this variable?
}});
the template is rendered on server side, and then sent to client. this means the content type of the response is "text/html", not "image/png".
your variables do not have "Content-Type", as they are not HTML responses. if you want to embed an image in an html, and you know its raw data, it usually looks like this:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
now if you have the image data (like whatever after base64 part) somehow stored in a JS variable, and want to pass it to your template renderer to embed that image in the resulting html, it would look like this:
// node js code:
imgData = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
res.render('my.template.html', {
imgData,
// whatever else ...
});
<!-- template code: -->
<img src="data:image/png;base64,{{imgData}}"/>
<!-- whatever else -->
of course this can change a bit based on the exact format you are storing the image data.