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

Solution 1

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">

Solution 2

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! 
}]

Solution 3

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:[email protected]"/>',
    attachments: [{
        filename: 'image.png',
        path: '/path/to/file',
        cid: '[email protected]' //same cid value as in the html img src
    }]
}

Comments

[Fals]

the error is kind of clear, the path for the image cannot be found. Take a look at the full path of the image.

[teebo]

@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?

[Chris]

In outlook it goes as attachment too. So that any one can download the image. Is there is any way to stop that

[dǝɥɔS ʇoıןןƎ]

Pretty sure that's to do with the outlook client, rather than the actual email. Check these: msoutlook.info/question/72 msoutlook.info/question/500

[dǝɥɔS ʇoıןןƎ]

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 stackoverflow.com/questions/9110091/…. Though I think some email clients will still pull any images out automatically. Nothing you can do about that from the sender's side

[DefenestrationDay]

Crucial is that the path must include the filename! The documentation doesn't show this.