:zap: Convert your Base64-Encoded Data URI's in `` tags to Amazon S3/CloudFront URL's. A better alternative than embedding images with CID using Nodemailer.
Convert your base64 encoded data URI's in
<img>
tags to Amazon S3/CloudFront URL's
It's the perfect alternative to cid-based embedded images!
Tip: This package is bundled with Lad and already pre-configured for you.
<img>
tags with base64 encoded data URI's to absolute paths stored on S3 (or optionally CloudFront).zlib.gzip
) via zlib.npm:
npm install nodemailer-base64-to-s3
const base64ToS3 = require('nodemailer-base64-to-s3');
const nodemailer = require('nodemailer');
const transport = nodemailer.createTransport({
// pass some options here to create a transport
// this example simply shows a JSONTransport type
// <https://nodemailer.com/transports/>
jsonTransport: true
});
transport.use('compile', base64ToS3(options));
Accepts the following arguments and returns a Nodemailer plugin.
options
(Object) - configuration options for base64ToS3
maxAge
(Number) - Cache-Control
headers max-age
value in milliseconds (defaults to 1 year = 31557600000
)dir
(String) - Amazon S3 directory inside of aws.params.Bucket
to upload assets to (defaults to /
(root) - must end with a trailing forward slash /
) – if you want to upload to a particular folder in a bucket, then set it herecloudFrontDomainName
(String) - Amazon CloudFront domain name (e.g. gzpnk2i1spnlm.cloudfront.net
) (will use process.env.AWS_CLOUDFRONT_DOMAIN
environment variable by default if available)aws
(Object) Required - configuration options for Amazon Web Services
params
(Object) Required
Bucket
(String) Required - AWS Bucket NamefallbackDir
(String) - a fallback directory to write to in case Amazon S3 upload fails (automatically set to os.tmpdir()
otherwise if NODE_ENV
is production then it is set to false and disabled) - you may want to specify the full path to your build directory so files are stored there (e.g. fallbackDir: path.join(__dirname, 'build', 'img', 'nodemailer')
)fallbackPrefix
(String or Boolean) - the prefix to use for relative paths, e.g. you don't want to have file:///some/tmp/dir/foo.png
, but you want to have https://example.com/img/foo.png
instead - so specify that prefix here (e.g. fallbackPrefix: 'http://localhost:3000/img/nodemailer/'
if you have a build directory fallbackDir
of path.join(__dirname, 'build', 'img', 'nodemailer')
and path.join(__dirname, 'build')
is being served by your web server). The default value is false
and therefore file:///
relative path will be used instead.logger
(Object) - a logger to use in the event of an error while uploading to S3 (defaults to console
)This is a screenshot taken directly from Gmail on a Retina-supported device.
Above we have a Lad sample email sent using Nodemailer and Nunjucks.
What does it look like behind the scenes?
Here's a snippet from the navbar shown in the screenshot above. We utilize font-awesome-assets for rendering the icons/images and code block.
<div class="container header p-y-1">
<nav>
<ul class="nav nav-pills pull-xs-right">
<li class="nav-item"><a title="Book" class="btn btn-md btn-outline-secondary" href="{{ config.urls.web }}/{{ locale }}">{{ fa.png2x('book', '#ccc', 20, 20, [ [ 'class', 'fa-img' ] ]) | safe }}<span class="hidden-sm-down"> {{ t('Book') }}</span></a></li>
<li class="nav-item"><a title="Jobs" class="btn btn-md btn-outline-secondary" href="{{ config.urls.web }}/{{ locale }}/jobs">{{ fa.png2x('briefcase', '#ccc', 20, 20, [ [ 'class', 'fa-img' ] ]) | safe }}<span class="hidden-sm-down"> {{ t('Jobs') }}</a></a></li>
<li class="nav-item"><a title="GitHub" class="btn btn-md btn-outline-secondary" href="https://github.com/ladjs/lad">{{ fa.png2x('github', '#ccc', 20, 20, [ [ 'class', 'fa-img' ] ]) | safe }}<span class="hidden-sm-down"> GitHub</span></a></li>
</ul>
</nav>
<h1 class="m-b-0 h4"><a class="text-muted" href="{{ config.urls.web }}/{{ locale }}">{{ 'crocodile' | emoji }}<span class="hidden-sm-down"> Lad</span></a></h3>
</div>
Name | Website |
---|---|
Nick Baugh | http://niftylettuce.com/ |