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);
Related
I'm using Thunderbird 52.5.2 on Windows 7.
When I compose the html emails and send, Thunderbird will convert the email addresses and the http:// urls I wrote to clickable hyperlinks when sending the email out. I don't want Thunderbird to do that for me and I would do that manually when I need by insert->links.
How to prevent Thunderbird from automatically rewriting URLs to hyperlinks when I compose and send the html emails ?
For example, I would like to compose a html email like this:
Email content I composed (I'm not able to embed img now, please click to view)
Thunderbird will rewrite the email address and http url as below (source code view)
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=en-US">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<b>H</b><i>ELLO</i><br>
This is an email address <a class="moz-txt-link-abbreviated" href="mailto:dummy#example.com">dummy#example.com</a><br>
This is a http url <a class="moz-txt-link-freetext" href="http://www.example.com/dummy.html">http://www.example.com/dummy.html</a><br>
<br>
</body>
</html>
But I want Thunderbird keep what I wrote as below (source code view):
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=en-US">
</head>
<body text="#000000" bgcolor="#FFFFFF">
<b>H</b><i>ELLO</i><br>
This is an email address dummy#example.com<br>
This is a http url http://www.example.com/dummy.html<br>
<br>
</body>
</html>
Inspired from previous answer. I found another trick that DO make Thunderbird render my email correctly which has no clickable links.
When I compose a html email and edit to an email address, I have to manually use insert-->html it as below:
dummy<span>#</span>example.com
and below is for html urls:
http<span>:</span>//www.example.com/dummy.html
Then I got a perfect result.
I have wanted the same feature you requested, but the closest I have been able to get it is using the following work-around.
1) After I create the email, instead of immediately sending, I use the "send later" feature which places the email into the Outbox folder. See https://addons.thunderbird.net/en-US/thunderbird/addon/send-later-button/?src=search?src=search
At this point the email if formatted with the HTML codes for anchor text and hyperlinks as the OP indicated.
2) Then I use the "Edit Full Source" feature of "Header Tools Lite" Add-On to remove the unwanted HTML code. See https://addons.thunderbird.net/en-US/thunderbird/addon/header-tools-lite/?src=search?src=search
BTW, the other work-arounds provided by others above, leave HTML code in the email. Though the hyperlink within the email may not function, the anchor text still remains formatted as a link. This is because of the lingering HTML codes remaining in the email.
One trick I found is to enclose the url in <a>..</a> tags.
This may seem silly, but it will prevent linkification from taking place, and without a href attribute, there will be no other interaction.
This is an email address <a>dummy#example.com</a><br>
Here I used job and service to send a mail to users. Now I want to send our app link with mail as a play store image. I totally done with gmail account. But for a outlook users, the image does not display. What I was done is, in mailer
def course_mailer(email, title, description)
mail(:bcc => email, :subject => title) do |format|
format.html { render html: '<div class="text-center" style="margin-top: 60px;">'
"#{description}" '<br>
<a href="https://play.google.com/store..." target="blank">
<img alt="Get it on Google Play" src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" style="height: 75px;"></a>
</div>'.html_safe }
end
I call this method in my service as,
CourseMailer.course_mailer(#delivery[0].emailIds, #delivery[0].title, #delivery[0].description).deliver_now!
This service correctly called when a mail send to gamil domain. The image source doesnot display when the mail sent to outlook users. The change done in html is,
in gmail,
<img alt="Get it on Google Play" src="https://ci5.googleusercontent.com/proxy/SIiw9QYZvvWkjPnHXXOtNDZOQSVfteW0xFkeVVgT--Mz5VwUkdd1Cy64y5G9geRByBkoHWsDjnWXg5apnUVsQgykWcnVZKHCCU44Us1cjWtNfibbBrzOl3XO3FLu8fn8dGmE0tJnqA=s0-d-e1-ft#https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" style="height:75px" class="CToWUd">
in outlook,
<img alt="Get it on Google Play" style="height:75px" blockedimagesrc="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png">
The img src(gmail) changed into image blockedimagesrc(outlook).How can I get the img src to display an image in outlook also.
Images are blocked by default except for trusted senders. When images
are blocked, there are two options displayed at the top of the email:
“To help protect your privacy, some content in this message has been
blocked. To re-enable the blocked features, click here.”
“To always show content from this sender, click here.”
When either option is selected, images display. If you choose to “always show content from
this sender,” images will automatically display from that sender
moving forward.
Source: https://litmus.com/blog/rendering-css-support-more-in-office-365s-outlook-web-app
Link to JSfiddle
My first attempt at an HTML email blast and I'm kind of stuck on attaching an .ics and having it open within outlook or whatever their preferred email client is instead of downloading the .ics file directly.
The requirement
1. Clicking on the image adds an event to your calendar. (I prefer this not to be a hosted .ics file, but my searching has not led me to a way to hardcode the .ics within the HTML email)
Here's the offending HTML:
<a href="webcal://http://mathiasprovinggrounds.com/WinterWunderman/WundermanWinterParty.ics"><img class="image_fix" src="http://i.imgur.com/SvlJYLU.jpg" alt="Wunderman Winter Party!" title="We Survived the Holidays! Until next year..." width="x" height="x" /><a href="">
Currently when the email is sent and the user clicks on the image, the calendar is downloaded via their preferred web browser and not opened directly in outlook.
I've tried the following:
Hosting the .ical directly and using href="http://mathiasprovinggrounds.com/WinterWunderman/WundermanWinterParty.ics"
Using the webcal attribute as found here.
Is there a specific way I could hard code an .ics instead of hosting it on my server? That seems to be the ideal solution, but the only results I have found would include PHP and I would like to keep everything within a single HTML.
I believe the answer you were looking for could be found on this page under Creating a single-event link: https://msdn.microsoft.com/en-us/library/hh846807.aspx
Your URL, with the values replaced:
http://calendar.live.com/calendar/calendar.aspx?rru=addevent&dtstart=START_DATE_AND_TIME&dtend=END_DATE_AND_TIME&summary=EVENT_TITLE&location=LOCATION_TEXT
START_DATE_AND_TIME = yyyymmddThhmmss, required.
END_DATE_AND_TIME = yyyymmddThhmmss, required.
EVENT_TITLE = Escaped string, optional.
LOCATION_TEXT = Escaped string, optional.
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.
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