Embed image in email body nodemailer nodejs

Question

I am following the approach used in the nodemailer community site but I cannot seem to get it to work as I am getting the error

   Failed to send email { Error: ENOENT: no such file or directory, open 
'./rello-logo-full-svg.svg'
 errno: -2,
  code: 'ESTREAM',
  syscall: 'open',
  path: './rello-logo-full-svg.svg',
  command: 'API' }

The nodemailer options are as follows

    let mailOptions = {
        from: '<from_email>', 
        to: to_email_address.toString(),
        subject: 'Subject',
        text: 'Hello world', // plain text body
        attachments: [{
          filename: 'rello-logo-full-svg.svg',
          path: './rello-logo-full-svg.svg',
          cid: 'unique@cid'
      }],
        html: emailBody
    };

And in the emailBody variable I have a template string with an image tag line like so

<img style="width:250px;" cid:unique@cid>

Do I maybe need to set the static assets for express or what, the image file is in the same folder as the file that has the above code, any help is appreciated

the error is kind of clear, the path for the image cannot be found. Take a look at the full path of the image. — Fals, Jan 25 '18 at 18:25
@Fals Sure but the file that references the image file are in the same directory, is there something else I am missing like, setting it up with express or something? — Thabo, Jan 25 '18 at 18:27

score 44 · Answer 1 · answered Apr 19 '18 at 20:34

44

Responding here in case anyone else encounters this! The __dirname above was really helpful, but this is my code to actually see the image embedded in the email

My img tag:

<img src="cid:logo">

My attachments snippet:

attachments: [{
     filename: 'Logo.png',
     path: __dirname +'/folder/Logo.png',
     cid: 'logo' //my mistake was putting "cid:logo@cid" here! 
}]

answered Apr 19 '18 at 20:34

Tori Henri

734
2
9
20

1

*Crucial* is that the path _must include the filename_! The documentation doesn't show this. – DefenestrationDay Mar 14 '22 at 17:39
the path can also be a data url which is pretty cool – Daniel Jun 05 '23 at 00:24

Thabo · Accepted Answer · 2018-01-25T20:10:47.750

So I got it to work by using ...

 path: __dirname + '/rello-logo-full-svg.svg',

....

But funny this is not what I was trying to achieve because I wanted the image to be in the email body, bu hope this'll help someone else.

Hey, I just changed the file name from .svg to .png, another mistake I made was with the image in the template, I have changed it to

 <img style="width:250px;" src="cid:unique@cid">

score 11 · Answer 3 · answered May 07 '19 at 14:34

11

I found a great example of this at https://community.nodemailer.com/using-embedded-images/. Here is the post

Using Embedded Images

Attachments can be used as embedded images in the HTML body. To use this feature, you need to set additional property of the attachment – cid (unique identifier of the file) which is a reference to the attachment file. The same cid value must be used as the image URL in HTML (using cid: as the URL protocol, see example below).

NB! the cid value should be as unique as possible!
var mailOptions = {
    ...
    html: 'Embedded image: <img src="cid:unique@kreata.ee"/>',
    attachments: [{
        filename: 'image.png',
        path: '/path/to/file',
        cid: 'unique@kreata.ee' //same cid value as in the html img src
    }]
}

answered May 07 '19 at 14:34

dǝɥɔS ʇoıןןƎ

1,674
5
19
42

1

In outlook it goes as attachment too. So that any one can download the image. Is there is any way to stop that – Chris Jun 27 '19 at 05:44
1

Pretty sure that's to do with the outlook client, rather than the actual email. Check these: https://www.msoutlook.info/question/72 https://www.msoutlook.info/question/500 – dǝɥɔS ʇoıןןƎ Jun 27 '19 at 09:31
1

Actually, I didn't understand what you meant before. Yeah, so if you want it embedded, you could just convert the image to base64 and include that https://stackoverflow.com/questions/9110091/base64-encoded-images-in-email-signatures. Though I think some email clients will still pull any images out automatically. Nothing you can do about that from the sender's side – dǝɥɔS ʇoıןןƎ Jun 27 '19 at 09:33

score 3 · Answer 4 · answered Sep 19 '21 at 18:33

NodeMailer's HTML image attachment

For HTML template images in Nodemailer, There are a couple of things to take into consideration or to pay close attention to is:

attachments: [{
 filename: 'img.png',
 path: __dirname +'/folder/img.png', // path contains the filename, do not just give path of folder where images are reciding.
 cid: 'img' // give any unique name to the image and make sure, you do not repeat the same string in given attachment array of object.
}]

<img src="cid:img" />

in the image tag, src should contain the relevant image's name which we gave in attachment object's cid property name.

Important

If you see, few images are seen as attachment to the email thread and you don't want those images to sent as "ATTACHMENT",

Ans: Then make sure, the images that you gave details in attachment: [{ ...}] array of object are all used on HTML's img src.

For ex:

   attachment: [{
         filename: 'logo1.png',
         path: '/path/logo1.png',
         cid: 'logo1'
     },
     {
         filename: 'logo2.png',
         path: '/path/logo2.png',
         cid: 'logo2'
    }]



<img src="cid:logo2" />

in this case, the logo2 will get bind to HTML template and logo1.png will get attached to email's thread.

Embed image in email body nodemailer nodejs

4 Answers4

Using Embedded Images

NodeMailer's HTML image attachment

Important

Linked