What would be a good way to juice a PNG image?

[gswcm]

I am trying to embed a small image at the top portion of the e-mail. The PNG file is pointed by webResources, i.e. here is how I create the instance of the template:

new emailTemplates({
   transport: smtpTransport,
   juice: true,
   juiceResources: {
      preserveImportant: true,
      webResources: {
         relativeTo: path.join(__dirname, '..', '..', 'dist')
      }             
   }
})

and it works well when I use

head
   link(rel='stylesheet', href='css/style.css', data-inline)

in PUG template, assuming that css directory is located in dist

The problem comes when I am trying to use an PNG image that is also stored in dist directory and specify its name direvtly in the image tag:

img(style="height:100px;", src=`logo_.png`)

In the resulted e-mail HTML the image URL gets substituted by 'http://logo_.png'

Since my dist directory stores other valuable assets, I attempted to replace the src in <img> to point to it directly, e.g. http://<hostname>/logo_.png . It works OK in debugging but when I run app in production, where <hostname> is some real address (not localhost:8080 or similar), it takes forever to render and send the e-mail.

Any suggestions? Should I use url-encoded images instead or maybe any plugins? Thank you.

[niftylettuce]

For production you should be using https://github.com/ladjs/nodemailer-base64-to-s3.

I'll need to write a test for PNG base64 for both test and prod environments.

[gswcm]

Would it be possible to instruct template compiler to leave image url as it is so it would be resolved later when email is open? I can see it often when I open an email in gMail and after a few moments some images get resolved... it looks like they are remotely referenced.

If this is not possible, then for the nodemailer-base64-to-s3 to work I will need the image in my PUG template to be presented as data-url, correct? Why not to leave the data-url as it is so keep the image embedded in the e-mail?

[niftylettuce]

@gswcm you can do images: false or there's also a data-inline-ignore attribute you can use to ignore images from web resource inliner

https://github.com/jrit/web-resource-inliner

do these resolve your issues?

and no, nodemailer-base-64-to-s3 assumes that you're using web resource inliner, which converts images to base64 inline like img src='data-url,base64;...

[gswcm]

I set the value of "images" to "16" (my image is 10k) which should enforce converting the image into base64 data-url. It works in debugging mode where email preview gets created, but when I turn debugging off and send the email to a gMail account, the image is not there.

On Sat, Oct 28, 2017 at 7:32 AM, niftylettuce notifications@github.com wrote:

@gswcm https://github.com/gswcm you can do images: false and there's also a data-inline-ignore attribute you can use to ignore images from web resource inliner

https://github.com/jrit/web-resource-inliner

do these resolve your issues?

and no, nodemailer-base-64-to-s3 assumes that you're using web resource inliner, which converts images to base64 inline like img src='data-url,base64;...

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/niftylettuce/email-templates/issues/257#issuecomment-340184490, or mute the thread https://github.com/notifications/unsubscribe-auth/AG2CAkKQjb99aGf3ywybE5Y-bf09HE-mks5swxDUgaJpZM4QI4QK .

[niftylettuce]

That's because you need to use something like https://github.com/ladjs/nodemailer-base64-to-s3