I'm using a mix of ejs and emailjs to send out emails in my node.js app when various events happen. I'd like to embed a base64 image (a small logo) into the email when it sends, but both Outlook and Gmail (plus Inbox by Google) fail to render the image.
I'm using this bit of code to find the mime type of the image and put together the base64 string:
MyApp.prototype.ImageToBase64 = function(image) {
var mime = require("mime")
file = fs.readFileSync(__dirname + "/images/" + image, { encoding: 'base64'})
return 'data:' + mime.lookup(image) + ';base64,' + file;
}
That works great, because I'm able to copy and paste that resulting string right into my browser and see the image. But when I send the email via emailjs, Outlook converts the +s to +. When I "View Original" in Gmail, the base64 is split up into 'chunks'. Each chunk is on a newline and each line ends with a =. If I take Gmail's version and remove the = and newline then paste it into my browser, the whole picture loads perfectly, but it just refuses to load anywhere else, regardless of whether the user is in my contact list or not.
Here's the code I'm using to send the email:
// Host, username, password and SSL (false) all set above here
server.send({
text: myTemplate,
from: "me#example.com",
to: "someone#example.com",
subject: "Testing",
attachment: [
{data:myTemplate, alternative:true}
]
})
And the template looks like this (truncated, as the other bits aren't important):
<body>
<p><img src="<%- ImageToBase64("logo.png") %>"></p>
<h1><%= Name %> has been triggered</h1>
<p><%= Name %> has been triggered. It was triggered on <%= TheDate %></p>
Any hints?
EDIT: I tried setting the headers in the "attachment" property, but with no luck
Outlook uses Word to render the images, and Word does not support embedded (src="data:image") images.
You need to attach the image as a file and set the Content-ID MIME header to the value matching the cid attribute on the image (<img src="cid:xyz">) in the HTML body.
Okay, so even though this answer is from 2013, it seems like the wisdom still holds true, in that base64 image support sucks in email clients.
Basically the only mail clients that still support inline images are either older ones (e.g. Office 2007), or Apple / Android's default mail apps.
While that's a bit disappointing, it's not the end of the world, as the email will only be seen by people on the same network as my app, so I can just point to the image hosted on the web portion of the app.
But for anyone else trying this, host your image on an image sharing site like Imgur or on your own server and use a regular ol' <image> tag to display it.
So much for self-contained emails, right?
Related
In my current project, we are sending some user chosen services to the mail address provided in input.
We are using a HTML file to format the services and copying this html template to 'mail.Body' before sending the email.
The emails are sent using Sendgrid
When recieving this in gmail ,only for some clients (Set-A) ,even for short email '[Message clipped] View entire message' is shown at the bottom of the email.
We use similar html template to send it for different clients(Set -B), but '[Message clipped] View entire message' is NOT DISPLAYED in this mail ,even when the email is longer.
Tried minified HTML template , but still 'View entire message' is shown at bottom of gmail for only Set-A clients.
The HTML file size before copying to mail body for Set-A (40.11KB) is smaller than that of Set-B (49.09KB).
So I am assuming size is not the problem for this
I compared both the HMTL templates, no difference in styles or other HTML tags. Just the text content is different.
Kindly advise how to avoid this 'View Entire message' option being displayed.
For me it had to do with the character set of the email body. Email body "Hej på dig!" and "Content-Type: text/plain; charset=UTF-8" would reproduce the bug.
You need to make sure that the email body is indeed encoded as declared (check using "show original"). After converting the body from ISO-8859-1 to UTF-8 the problem went away.
I am working on a personal project in which I am using Magic the Gathering's API to search through their card databases and display them on my website. One of the problems I have encountered is that an argument of the card object that is stored in the database is displayed as {G},{R},{B},{U},{W} etc. but I want it to be displayed as one of the many images found here:
https://media-dominaria.cursecdn.com/attachments/132/91/635465459096129102.png
Considering that the argument is a string, I don't know how to replace the content of the string that is inside the curly brackets with a html image element and have it display properly in the browser.
For example:
mana_cost= "{G}{W}"
I would like to be able to show "{G}" as:
http://img2.wikia.nocookie.net/__cb20130604114032/mtg/images/f/f7/Mana_G.png
and "{W}" as:
https://static.giantbomb.com/uploads/original/8/88760/2277116-white_mana.png
Any help is welcome
You can use a RegEx on the client side and replace with the image before showing in the browser.
let strToReplace = '{G}';
strToReplace = strToReplace.replace(/{G}/, '<img src="http://img2.wikia.nocookie.net/__cb20130604114032/mtg/images/f/f7/Mana_G.png">');
I would download the image and put it on a local folder so you can replace for something like:
strToReplace = strToReplace.replace(/{G}/, '<img src="/images/Mana_G.png">');
fiddle: https://jsfiddle.net/649y20s3/
in my node js project, I am using gmail to send mail, mails are going fine, except that when I put data in tabular form with HTML code then rather printing the data in tabular form, it simply prints the html code.
what am I missing here, should I user any specific npm, as of now I am using nodemailer.
You might be writing the HTML code in the text field. Use nodemailer's html field
var mailOptions = {
html: '<b>Hello world!</b>',
}
and write your HTML code into this field.
I am looking for best way to compose an email and attach document link for notes and web client using SSJS.
We are doing it one way but I think there is some good way of doing this. I want to use complete functionality of Rich Text Item e.g. formating, styles and other which we normally do in LotusScript.
Any sample application having industry standard way of doing this will be great help.
Following is sample code how we are doing right now.
var stream = session.createStream();
stream.writeText("Application is forwarded to you for approval. ");
var var3 = '<a href =' + notesDocLink + '> Open in Rich Client (Doc Link) </a>'
var var4 = '<a href =' + webDocLink + '> Open in Internet Explorer </a>'
stream.writeText( var3 + " For web Client Use this link: " + var4 , 2);
stream.writeText("Note: This is auto-generated email and do not require any reply. ");
mailBody.setContentFromText(stream, "text/html; charset=iso-8859-1", 0);
mailDoc.replaceItemValue("SendTo",mailSendTo);
mailDoc.replaceItemValue("CopyTo",mailCopyTo);
mailDoc.send();
I am interested in something like this which is currently not working for me.
mailDoc.replaceItemValue("Form","Memo");
mailDoc.replaceItemValue("Subject" , strSubject);
var RTItem:NotesRichTextItem = mailDoc.createRichTextItem("Body");
RTItem.appendText("Leave Application is forwarded to you for approval. ");
RTItem.addNewLine(2);
RTItem.appendText("Please click on below document link for details. ");
RTItem.appendDocLink(currDoc, "Click on Link to Proceed")
RTItem.addNewLine(2);
RTItem.appendText("Note: This is auto-generated email and do not require any reply. ");
RTItem.addNewLine(2);
mailDoc.replaceItemValue("SendTo",mailSendTo);
mailDoc.replaceItemValue("CopyTo",mailCopyTo);
mailDoc.send();
For doc links, please confirm that the answer to this question doesn't solve your problem Getting an Error message when trying to appendDocLink is SSJS.
There are a couple of code examples for emails on XSnippets:
Mark Leusink's creation of email as MIME http://openntf.org/XSnippets.nsf/snippet.xsp?id=create-html-mails-in-ssjs-using-mime
Tony McGuckin's emailBean: http://openntf.org/XSnippets.nsf/snippet.xsp?id=emailbean-send-dominodocument-html-emails-cw-embedded-images-attachments-custom-headerfooter
For anyone using the OpenNTF Domino API, this has a DominoEmail class, for creating an email as well.
In R9 there is also a Send Mail simple function.
Personally, I'd prefer HTML and MIME for styling compared to the RichTextStyle classes. It also gives greater flexibility for web links as well as client. It has the added benefit of fidelity when sending outside Notes. Even for Notes users viewing on mobile devices via Traveler, I think the Traveler server will have to convert to MIME to ensure the styles are available, so it's easier to cut out that step by using MIME for a start.
I'm trying to send an email, with HTML content that includes an image tag,
for example:
<img ng-src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEU...gAAASwAAAAmCC" />
unfortunately none of the mail client i'm using support this kind of "src" on image tag.
tried to Google it, it seems as known issue, but none of the answers was good for me.
by the way, i'm using AngularJS to bind the model to the html content, then pass it as an html string
to the WebApi controller, and then send it with an Smtp client.
Hope someone can help me solved this somehow,
Thanks,
Nadav S.
Yes, that is correct. Most clients do not support the "data:" url and even if they do, the size of the binary you can embed is very limited. Barely enough for a thumbnail, not enough for a real picture.
The correct way to do this is with mime multipart/related and the "cid:" url. Then one part contains the HTML and the other part contains the base64 encoded picture. The image part contains a header with a field called "Content-ID". The value is any unique string surrounded by <>. For example:
Content-ID: <xxxyyy>
In your HTML you use the following code:
<img src="cid:xxxyyy"/>
See rfc-2392 for the full specification.