0

I am sending an html email using nodemailer in node.js, I am sending using the templates concept of the email-templates npm package [https://www.npmjs.com/package/email-templates].

Here, the email is sending successfully but the image in the HTML is not displaying on the email when received.

this is the main file which sends the mail :

const nodemailer = require("nodemailer");
var Email = require('email-templates');
const path = require('path');

var transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: 'test@gmail.com',
      pass: 'password'
    }
  });

  const email = new Email({
    transport: transporter,
    send: true,
    preview: false,
    views: {
        options: {
          extension: 'ejs' 
        }
      },
    juice: true,
        juiceResources: {
            preserveImportant: true,
                webResources: {
                    relativeTo: path.join(__dirname,'./templates/emailCampaign/images')
            }
    }
  });

  email.send({
    template:path.join(__dirname,'./templates/emailCampaign'),
    message: {
      from: 'test@gmail.com',
      to: 'test@gmail.com',
    },
    locals: {
        tournament_name:"tournament_name",
        date:"date",
        time:"time",
        fee:"4",
        sections:"sections",
        description:"description"
    },


  }).then(() => console.log('email has been sent!'));

This is the HTML part where I want my image to show

<img style="width: 100%;
                height: auto;"
        src="./images/background.jpg" 
        alt="game">
Rittesh P.V
  • 393
  • 1
  • 6
  • 20
  • 1
    `"./images/background.jpg"` is a relative path url. It is not a large stretch of imagination to assume that the image you are wanting to user to view does not reside on whatever email client (website) they are using, and would be an invalid path. – Taplar Jun 03 '20 at 20:47
  • 1
    so ,.... what do I do ? – Rittesh P.V Jun 03 '20 at 20:48
  • Either embed the image into the email as base64 encoded images, or make their urls be fully completed to a server path that everyone has access to. – Taplar Jun 03 '20 at 20:49
  • base64 encoded image how do I use it apply it here – Rittesh P.V Jun 03 '20 at 20:50
  • You have to specify where the resources reside, so that that `email-templates` includes them. Check the `juiceResources` and `webResources` in the documentation. – px1mp Jun 03 '20 at 20:50
  • Related: https://stackoverflow.com/questions/6150289/how-can-i-convert-an-image-into-base64-string-using-javascript – Taplar Jun 03 '20 at 20:51
  • I have updated the question with the following suggestion JuiceResources but still the image is not shown – Rittesh P.V Jun 03 '20 at 21:06

1 Answers1

5

You can do something like:

  email.send({
    template:path.join(__dirname,'./templates/emailCampaign'),
    message: {
      from: 'test@gmail.com',
      to: 'test@gmail.com',
    },
    locals: {
        tournament_name:"tournament_name",
        date:"date",
        time:"time",
        fee:"4",
        sections:"sections",
        description:"description"
    },
    attachments: [{
                filename: 'logo.jpg',
                path: `${__dirname}/../public/images/logo.jpg`,
                cid: 'logo1' //same cid value as in the html img src
   }]

And then in your html img src attribute, have the same cid value like so:

<img src="cid:logo1"/>

Check the documentation here

Foz
  • 88
  • 1
  • 6