How to display image in html email message? - html

I'm writing a j2ee application, that generates an html and sends it as email. In my html, a have an image, but it is not displayed when email is received. The html code is something like:
<img src="myimage.gif"></img>
where "myimage.gif" is sent as attached file in the email.
I tried to change it to
<img src="cid:myimage.gif"></img>
but still no result. Any ideas?
It should be without a link to the image.

You should upload your image to you server and reference that as a hard coded url in the src
e.g. upload to myserver.com/images/myimage.gif the in your html
<img src="http://myserver.com/images/myimage.gif" />

Take a look at Commons Email. It's build on top of the Java Mail API but simplifies it.
They have an example for sending html mails with inline images http://commons.apache.org/email/userguide.html
import org.apache.commons.mail.HtmlEmail;
...
// Create the email message
HtmlEmail email = new HtmlEmail();
email.setHostName("mail.myserver.com");
email.addTo("jdoe#somewhere.org", "John Doe");
email.setFrom("me#apache.org", "Me");
email.setSubject("Test email with inline image");
// embed the image and get the content id
URL url = new URL("http://www.apache.org/images/asf_logo_wide.gif");
String cid = email.embed(url, "Apache logo");
// set the html message
email.setHtmlMsg("<html>The apache logo - <img src=\"cid:"+cid+"\"></html>");
// set the alternative message
email.setTextMsg("Your email client does not support HTML messages");
// send the email
email.send();

If the image is small enough, you could use my HTML Table pixel format :)
see my blog for details: HTML Table Pixel Format
This is just plain valid HTML, however it renders as an image.
/end of shameless plug

Related

Send email with attached pdf using html

I am working on the email template using HTML, and the requirement is to send an email with the attached pdf. PDF is there in the "images and media" storage but it is not being attached. Although images are being attached.
I expect that while sending an email, email should have attached pdf also. A recipient should get the pdf file in the email.
We could Achieve it through VF Email Template with following,
If your Attachment is static(Like pdf,img and etc) - Go with standard Attach File option below the VF email template
If your attachment has dynamic merge fields - Proceed with below hack, you can bundle your images from static resources or from VF Component.
<messaging:emailTemplate subject="subject" recipientType="User"
relatedToType="objName">
<messaging:htmlEmailBody >
Email template Content goes here...
</messaging:htmlEmailBody>
<messaging:attachment filename="Attachment Name" renderAs="pdf">
Email Template Attachment Content goes here....
</messaging:attachment>
</messaging:emailTemplate>

Gmail not showing embedded images in email

I've been looking at different threads online and here at SO discussing embedding images into email and why they don't always send the image. I'm embedding a base64 encoded string into an img tag and gmail is rejecting it. When I inspect the email the img src attribute is empty and some info has been added to the 'a' tag that represents it's parent element. I made sure to set my gmail setting to include external images! When I look at outlook.com emails they do send the image.
I've read that the email and image must come from a public server? Currently I'm sending the email from my localhost running iis (because I'm testing) and using sendgrid to send my emails.
Can anyone give me more advice on getting the image to display in my email in gmail's service?
FYI - Here is how I'm constructing the image tag. I've included different attributes in the img tag to get it to show but none of these attributes have worked for gmail. I also use '#Raw' because I'm constructing my email with razore engine nuget package and 'Html.Raw()' doesn't work with Razore Engine! The email text looks good before I send it to sendgrid for mailing it off and I see it image in outlook so I know the body is good.
<a href="www.mysite.com/Space/Public/#Model.SpaceId" target="_blank" class="thumbnail" style="margin-bottom: 0px;">
<img alt="SpaceImage" title="Space Image" style="display: block" width="225" height="225" src="data:image/jpg;base64,#Raw(Model.SpaceThumbnail)" />
<div class="caption">
#Model.SpaceName
</div>
</a>
Whenever we are sending emails, we have to embed the image for it to render successfully in most email clients including gmail. For asp.net it would be something like this:
string html = #"<html><body><img src=\"cid:imageId\"></body></html>";
AlternateView view = AlternateView.CreateAlternateViewFromString(html, null, MediaTypeNames.Text.Html);
LinkedResource imageResource = new LinkedResource("yourImagePath", MediaTypeNames.Image.Jpeg);
imageResource.ContentId = "imageId";
view.LinkedResources.Add(imageResource);

What is the syntax for using cid:attachmentID in e-mail for image file used in css

I am working on a script that e-mails some formatted html and images to recipients. Using MIME::Lite, I figured out a way to send the css file and the image file it uses as attachments. The image comes out at the end of the mail message - as an attachment. The following line appears to work:
<link href="cid:style.css" rel="stylesheet" type="text/css" />
My question is what should be the syntax for the following lines (in the file style.css)? Following does not work.
body {
background-image:url("cid:bgLine.png");
background-repeat:repeat-x;
}
Furthermore, how can I stop the mail client from showing the image by itself? Script I am using follows:
my $msg = MIME::Lite->new( From =>"from\#company\.com",
To => "to\#company\.com",,
Subject =>"Action Required",
Disposition =>'inline',
Type =>'multipart/related');
$msg->attach(Type => 'text/html', Data => qq{#htFileContents});
$msg->attach(Type => 'text/html', Id => $cssFileName, Data => qq{#cssFileContents});
$msg->attach(Type => 'image/png', Id => $imageFile, Path => $imageFile);
$msg->send("sendmail","/usr/sbin/sendmail -t");
Having the mail client access an URL for the css or the image file from an http server is not an option. The e-mail needs to be self-contained. TIA for an example showing the syntax.
This won't really work. Even if by some miracle you were able to get your attachments to see and talk to each other, Outlook won't support background images, Gmail will strip out your linked css file and any embedded css, and hotmail will not support css backgrounds.
Sounds like you need to host an HTML email somewhere that accepts dynamic parts, and trigger the send from within your application, passing it the dynamic parts to fill in before sending. Check out a tool like Lyris Listmanager or something.
There is no connection between the title and the posted question above.
Anyway, in order to send emails, showing safely images, that are attached in the email, it just not enough to refer the images with some cid: URLs.
Attaching the images to the email has the following specifics:
Replace the external URLs to images with the URLs of an attachments in the email.
The email to generate is not just multipart/mixed what is construed by default of JavaMail, but MIME multipart/related type, in order to allow the email client to use the images.
The attachments for the images must be have
Content-Disposition: inline; filename=... header, in order they not to be shown as attached files, but to allow the email client to use them.
ContentID:unique-name#domain header, where the unique-name and domain have to be replaced with actual values and keep < and >!
Example: ContentId: logo.png#paysafe.com
The references in the HTML part of the email message (the message body) happens through cid:content-id URLs, where content-id is the the value of the ContentId header of the attachment holding the image
Example:
References:
https://javaee.github.io/javamail/docs/api/ for the mail protocol-specific properties.
https://www.rfc-editor.org/rfc/rfc2392 - defines the CID: URL schema and the use of addr-spec
https://www.rfc-editor.org/rfc/rfc822 - defines addr-spec in the form: local-part "#" domain
https://www.rfc-editor.org/rfc/rfc1806 - defines Content-Disposition header
https://www.rfc-editor.org/rfc/rfc2387 - The MIME Multipart/Related Content-type - vital for image inlining

UIActivityViewController UIActivityTypeMail ruining my mail urls

I am trying to send an email from my app. I format the email in a custom ActivityProviderMessage along the lines of this:
return [NSString stringWithFormat:#"<html><body>This is my html email body and
here is a very long url link: Long url link</body></html>", _url];
The problem with this, is when I receive the email and take a look at the source, the url is screwed up because it has been put on multiple lines with lots of = inserted at the end of each line.
The URL is actually a Base64 encoded image, which when pasted into safari shows the image fine.
Here's an example of a small image url, paste it into safari and you'll see the image:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMTFGOTk4Q0NGNzIxMUUyOUY1REQxQkQ4NDFFMzEwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMTFGOTk4RENGNzIxMUUyOUY1REQxQkQ4NDFFMzEwMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjExMUY5OThBQ0Y3MjExRTI5RjVERDFCRDg0MUUzMTAwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjExMUY5OThCQ0Y3MjExRTI5RjVERDFCRDg0MUUzMTAwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+R9i41AAAAedJREFUeNq8l81Kw0AQx9NQPHupoAhttVqw2oqePPkK3n0DT55sK1ZBq1a9+CIefADPnvyoVfEzVVAQwZMoFEGchQ2Mf3aTTdp04E93N7P5JbszO2kssfZjRWAOKU0aJL2qHOwIocJeSCPdAN8yqGt3pGyU4AZpVHPthjQUBficNO7j80ga6CT4ilQw9BWBlhCNeJvQJ1Iy4Jx3Up/dZvRy6FuAuWdhwU2I3gqpX/762YPI7zBgMTEF0KpsV33gDTev7RCBNMz6RQa1GLyomHtByoeJ6jppjPXLpF3DudcY+abgf09LViLVNL4rpB3I3xw6maTTPSnD+kukPQ/oBqRbRuUYN4jeFLypDroM0CYek6ZL7QAUl9CCINtk/WcvqBfYgTxdhRsjtAaBlPLbP9ugtOES4p7WIPJzJtFq+5Q2sWTbmrkleKBL0qRpbiIYS1tS5itaGR5IFPuJICcRBy9ofLbgGKzIMR692aDnbhwCyLUp0gHb63XSL2sbpYyXxeRXZg+pxcc1eYy1OB22ptqKvZ1nbXHjY02FCg3lS32iKOizshLNKCI/3+73kgD3wpiIziOPYlGwOmBiqb9hbF/h90Fa7BTUfeOWx/U50mEU/3FU1WmadGpFbAL8KY9J8ftldcn+BBgAl0Jc3zM1awwAAAAASUVORK5CYII=
Now when I log the message returned from my ActivityProviderMessage method it looks like this, which works as it should (Paste into a .html and open it, the link shows the image):
<html><body>This is my html email body and here is a very long url link: <a href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoxMTFGOTk4Q0NGNzIxMUUyOUY1REQxQkQ4NDFFMzEwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoxMTFGOTk4RENGNzIxMUUyOUY1REQxQkQ4NDFFMzEwMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjExMUY5OThBQ0Y3MjExRTI5RjVERDFCRDg0MUUzMTAwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjExMUY5OThCQ0Y3MjExRTI5RjVERDFCRDg0MUUzMTAwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+R9i41AAAAedJREFUeNq8l81Kw0AQx9NQPHupoAhttVqw2oqePPkK3n0DT55sK1ZBq1a9+CIefADPnvyoVfEzVVAQwZMoFEGchQ2Mf3aTTdp04E93N7P5JbszO2kssfZjRWAOKU0aJL2qHOwIocJeSCPdAN8yqGt3pGyU4AZpVHPthjQUBficNO7j80ga6CT4ilQw9BWBlhCNeJvQJ1Iy4Jx3Up/dZvRy6FuAuWdhwU2I3gqpX/762YPI7zBgMTEF0KpsV33gDTev7RCBNMz6RQa1GLyomHtByoeJ6jppjPXLpF3DudcY+abgf09LViLVNL4rpB3I3xw6maTTPSnD+kukPQ/oBqRbRuUYN4jeFLypDroM0CYek6ZL7QAUl9CCINtk/WcvqBfYgTxdhRsjtAaBlPLbP9ugtOES4p7WIPJzJtFq+5Q2sWTbmrkleKBL0qRpbiIYS1tS5itaGR5IFPuJICcRBy9ofLbgGKzIMR692aDnbhwCyLUp0gHb63XSL2sbpYyXxeRXZg+pxcc1eYy1OB22ptqKvZ1nbXHjY02FCg3lS32iKOizshLNKCI/3+73kgD3wpiIziOPYlGwOmBiqb9hbF/h90Fa7BTUfeOWx/U50mEU/3FU1WmadGpFbAL8KY9J8ftldcn+BBgAl0Jc3zM1awwAAAAASUVORK5CYII='>Long url link</a></body></html>
However the received email source in mail.app looks like this:
<html><head><meta http-equiv=3D"content-type" content=3D"text/html; charset=3D= utf-8"></head><body dir=3D"auto"><div>This is my html email body and here is= a very long url link: Long url link</div><div><br><br>Sent from my iPh= one</div></body></html>=
I notice that the received email automatically has a new Head tag in it, even if I supply my own in the email:
<html><head><meta http-equiv=3D"content-type" content=3D"text/html; charset=3D= utf-8"></head>
So, to get this working, is it simply a case of finding a right format for the url?
Or perhaps I need extra fields when I generate the email to tell mail.app not to change anything?
Please help.
Thanks
If you are trying to send an email with an attachment, then use this method:
- (void)addAttachmentData:(NSData*)attachment mimeType:(NSString*)mimeType fileName:(NSString*)filename
Otherwise, if your goal is to show an embedded image inline in the message, then you should use a standard <img> tag in the body of your email with a url that points to an image already publicly available online.

Attachment + Email + HTML + Play Framework

I'm using play framework in this project and I'm trying to send an E-mail with a Logo attached but I want to show this logo as part of my HTML code!
My Mailer:
EmailAttachment attachment = new EmailAttachment();
attachment.setDescription("Logo");
attachment.setName("logoMail.jpg");
attachment.setPath(Play.getFile("/public/images/email/logoMail.jpg").getPath());
addAttachment(attachment);
My HTML
The e-mail is sent, my Logo is attached there, but the image is never showed as a background on my DIV.
What am I doing wrong?
Thank you very much!
It depends on the e-mail client you are using to read your test e-mail. Most of them ignore or remove the background-image css property.
Take a look at the following:
http://www.email-standards.org/
http://www.campaignmonitor.com/design-guidelines/
I've been looking into embedding images into emails using MVC templates, and I think at the moment it's not supported.
As far as I can see, in order to use embedded images, the image attachment needs to have a Content-ID header on it. Attaching the image using addAttachment generates an attachment without this header.
The underlying email framework, apache commons email, allows you to embed images using the HtmlEmail.embed method, and there is an example of this in the Play documentation, but only when using Commons Email directly. addAttachment() will add an ordinary attachment, not an embedded one.
The problem is that HtmlEmail.embed returns the content id for the embedded image. The first problem is that there would need to be a mechanism for passing that content id forward into the template, so that you could reference it in the relevant link.
The second problem is that the way the Mailer.send() method is coded, the email itself is not created until after the template is rendered, and the result of attempting to render an html body is used to decide whether to create an HtmlEmail or a SimpleEmail. This method would need to be re-written to decide the type of email before rendering the template, and, if it was html, to create the HtmlEmail and attach the embedded images prior to rendering the template, so that it could pass the content ids to the renderer.
It certainly isn't impossible to make this change, and I might attempt it if I can find the time on my current project.
The solution could be to render HTML content manually and then put it into email. This code worked for me:
public static String test() throws EmailException, MalformedURLException {
HtmlEmail email = new HtmlEmail();
email.setHostName("smtp.server.com");
email.setAuthentication("username", "pwd");
email.setSubject("subject");
email.addTo("to#example.com");
email.setFrom("from#example.com");
URL url = new URL("https://example.com/image.png");
String cid = email.embed(url, "IMG1");
Template templateHtml = TemplateLoader.load("/Mails/test.html");
final Map<String, Object> templateHtmlBinding = new HashMap<String, Object>();
templateHtmlBinding.put("cid", cid);
String body = templateHtml.render(templateHtmlBinding);
email.setHtmlMsg(body);
return email.send();
}
I'm a bit late with my answer, but it is possible and integrates nicely with the MVC-Email tutorial. Assuming your mailer class is also notifiers.Mails, use this as a html template:
%{
String logoSrc = notifiers.Mails.getEmbedddedSrc("public/images/logo.png", "cool logo");
}%
<html>
<head>
</head>
<body>
Look at this cool image! <br>
<img src="${logoSrc}">
<br>
Amazing, no?
</body>
</html>