javascript - the image in html in not displaying when sent as email through nodemailer -node.js? - Stack Overflow

admin管理员组

文章数量:1401199

I am sending an html email using nodemailer in node.js, I am sending using the templates concept of the email-templates npm package [].

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: '[email protected]',
      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: '[email protected]',
      to: '[email protected]',
    },
    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">

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./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: '[email protected]',
      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: '[email protected]',
      to: '[email protected]',
    },
    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">

• javascript
• node.js
• email
• nodemailer

Share Improve this question Follow edited Jun 3, 2020 at 21:04 Rittesh P.V asked Jun 3, 2020 at 20:43 Rittesh P.VRittesh P.V 42333 gold badges1010 silver badges2121 bronze badges 7

• 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 Commented Jun 3, 2020 at 20:47
• 1 so ,.... what do I do ? – Rittesh P.V Commented Jun 3, 2020 at 20:48
• Either embed the image into the email as base64 encoded images, or make their urls be fully pleted to a server path that everyone has access to. – Taplar Commented Jun 3, 2020 at 20:49
• base64 encoded image how do I use it apply it here – Rittesh P.V Commented Jun 3, 2020 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 Commented Jun 3, 2020 at 20:50

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 5

You can do something like:

  email.send({
    template:path.join(__dirname,'./templates/emailCampaign'),
    message: {
      from: '[email protected]',
      to: '[email protected]',
    },
    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

本文标签： javascriptthe image in html in not displaying when sent as email through nodemailer nodejsStack Overflow