I am trying to send an email from an iOS device (Using Xamarin) in an HTML format with images embedded in the body of the email.
Some solutions that I found online suggest to use an approach similar to the one shown here:
NSData ImgData = UIImage.FromFile(FileName).AsJPEG();
string img64baseStr = ImgData.GetBase64EncodedString(NSDataBase64EncodingOptions.None);
string srcStr = string.Format("data:image/jpg;base64,{0}", img64baseStr);
Using the code above I can see the pictures properly in the iOS Email client. However, when the email is sent I can't see the images on the receiving side.
There are other setbacks to this approach, but I can avoid getting into those in more details at this point.
I have also tried using the images as resources in the project. However, when I reference the pictures directly in the HTML in this form:
<img src="Pic1.png" width="700" height="500" alt=""/>
the linkage is broken and the email is missing the images.
How can I properly reference resource images in an HTML email?
So it seems like the approach described above, of converting the data object to a base64 string is deprecated by most email clients for security reasons and the email client will block Dada URIs that are arriving this way.
I found the question posted in the link below to be helpful for understanding why things weren't working for me:
base64 encoded images in email signatures
Specifically refer to the answer posted by #Shadow2531 and the discussion that followed it.
Finally, I was able to achieve what I wanted using the MailKit package that is available on NuGet.
The package has a pretty comprehensive documentation. Specifically for the problem I was trying to solve, take a look at this page:
http://www.mimekit.net/docs/html/CreatingMessages.htm
Good luck.
Please bear with me; there's a long story coming up. It's about programatically creating HTML e-mails from Delphi-7, sending them to Outlook, and not showing the pictures in it, so if you don't know anything about that, don't bother reading it all.
I have an application that sends variable-text E-mails, from a Delphi-7 program, to Outlook. I'm using a TMailInfo item, use a template HTML file for layout, replace placeholders with data from the program (%NAME% becomes "Johnson" etc), create a new Outlook message and populate HTMLbody with my result. All of this works fine.
Recently my client sent me a new sample message, asking me if I could change this E-mail to the new layout as he sent me. So I saved the E-mail as html (from Outlook, generating a huge HTML file full of code that is hardly understandable for a non-HTML guru like me)), replaced the static data with my placeholders, and saved it as the new template.
This worked fine except for one thing - the new layout included some local pictures (not available from a public web resource). When original sample mail from outlook, two things were created - a htm file with the html code, named "Subject" AND a folder called "Subject_files", containing the picture files plus a filelist.xml and an mso file.
The generated HTML refers to the pictures as src="subject_files/image001.jpg"> etc.
When I send the HTML to Outlook, it obviously has no idea where the images are - but how do I tell him?
What I tried:
copying the "subject_files" folder to "My Documents"
hardcoding the links to the pictures in several formats (i.e.
src="C:/test/subject_files/image001.jpg",
src="C://test/subject_files/image001.jpg",
src="C:\test\subject_files\image001.jpg",
and the like
but both don't work... so my question is really, how do I tell Outlook where to look for image files when programatically creating an HTML message?
Thanks in advance!
Once you the email, the recipient does not have access to your computer, So the images won't show in the email. to send images in an email you can:
Use aboslute links
<img src="http://www.example.com/images/header.jpg">
Use embedded images
Convert your images to BASE64, you can find many web sites online to that like
https://www.base64-image.de/ then
<img src="data:image/jpg;base64,/*base64-generated-string*/" />
As mentioned by Remy, the images can be added as regular attachments. You will then need to set the PR_ATTACH_CONTENT_ID property (DASL name http://schemas.microsoft.com/mapi/proptag/0x3712001F) using Attachment.PropertyAccessor.SetProperty. The HTML body must use the matching value for the cid attribute - <img src="cid:xyz">, where "xyz" is the value of the PR_ATTACH_CONTENT_ID property.
I know similar questions have already been asked but the answer is almost always the same: you need to share the image on a server and link to it from within the email.
For my purpose I cannot do that.
The image needs to be personalized for each user I send an email to (so the email will be dynamically generated for each user and will not always be the same. I cannot share the image -- since it will change but also for avoiding disclosure of users' information).
Have you ever encountered this scenario? Should I go with attachments or base64 encoding of images? Thoughts/experiences?
The HTML body must refer to the images using the content id (cid): <img src="cid:xyz">, where xyz is the value of the attachment content id (Content-ID) MIME header.
If you are creating the message directly in the MIME format, make sure the attachment is added to the message and its Content-ID MIME header is properly set. If you are Outlook Object Model or MAPI, you must set the PR_ATTACH_CONTENT_ID property on the image.
Since HTML5 allows base64 encoded images inline, this might be the easiest way to go. Check the following source: http://www.bigfastblog.com/embed-base64-encoded-images-inline-in-html
You should consider that not all mail clients might support HTML5 and therefore attaching the image and referencing it in your code may be the harder but better choice. Unfortunately I have no experience with that.
Edit: This tutorial looks promising, but I have not tried it: http://www.phpeveryday.com/articles/PHP-Email-Using-Embedded-Images-in-HTML-Email-P113.html
I'm sending an e-mail newsletter in HTML.
Inside the HTML I have something like
<img height='70' width='70' style='display:block' src='myDomain.com/imageName.png'>
When I open the newsletter with Thunderbird or Outlook, the image is being displayed. However, when I open it with Gmail, no image is shown.
I'm not sure if it's about the proxy that Gmail uses for security reasons or if it's something else. Either way, I'd like to know if anyone ever came across this and if so, how it was solved.
Late to the party but here goes... I have experienced this problem as well and it was solved with the following:
Including the scheme in the src url (using "//" does not work - use full scheme EG: "https://")
Including width and height attributes
Including style="display:block" attribute
Including both alt and title attributes
EG:
<img src="https://static.mydomain.com/images/logo.png" alt="Logo" title="Logo" style="display:block" width="200" height="87" />
For me, the problem was using svg images. I switched them to png and it worked.
Google only allows images which are coming from trusted source .
So I solved this issue by hosting my images in google drive and using its url as source for my images.
Example:
with:
http://drive.google.com/uc?export=view&id=FILEID'>
to form URL please refer here.
Please also check your encoding: Google encodes spaces as + instead of %20. This may result in an invalid image link.
You might have them turned off in your gmail settings, heres the link to change them https://support.google.com/mail/answer/145919?hl=en
Also gmail may be blocking the images thinking they are suspicious.
from the link above.
How Gmail makes images safe
Some senders try to use externally linked images in harmful ways, but
Gmail takes action to ensure that images are loaded safely. Gmail
serves all images through Google’s image proxy servers and transcodes
them before delivery to protect you in the following ways:
Senders can’t use image loading to get information like your IP
address or location. Senders can’t set or read cookies in your
browser. Gmail checks your images for known viruses or malware. In
some cases, senders may be able to know whether an individual has
opened a message with unique image links. As always, Gmail scans every
message for suspicious content and if Gmail considers a sender or
message potentially suspicious, images won’t be displayed and you’ll
be asked whether you want to see the images.
Try to add title and alt properties to your image.... Gmail and some others blocks images without some attributes.. and it is also a logic to include your email to be read as spam.
I noticed that Google was stripping the src attribute from my img tags. I tried every answer on this page - with no luck.
What finally worked for me was replacing img tags with divs that have background images. For example, instead of:
<img style="height: 24px; width: 24px; display: block;" src="IMAGE SOURCE"/>
I replaced it with:
<div style="height: 24px; width: 24px; display: block; background: url(IMAGE SOURCE); background-size: contain;"></div>
Hope this helps others who spent way too long pulling their hair out over this.
In addition to what was said by Howard
You have to keep in mind that Google encodes spaces as +
To avoid this, the ulr must be encoded in RFC 3986, which means spaces encoded at %20, for example:
https://example.com/My Folder/image 1.jpg
to
https://example.com/My%20Folder/image%201.jpg
I had the same issue and for me it was because I was using an SVG image, once I changed to a JPG or PNG, it worked. Maybe this can assist someone who will come across the same issue. It seems Gmail doesn't support SVG images.
HTTP or HTTPS should be full address
background-image: url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg)
var mailOptions = {
from: 'fulladdress#gmail.com',
to: emails,
subject: 'i super another ma node mailer cool test',
text: 'That was easy!',
html: '<div style="background-image: url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg);width:500px;height:500px">ascfas</div>'
};
I know Gmail already fix all the problem above, the alt and stuff now.
And this is unrelated to the question but probably someone experiences the same as me.
So my web designer use "image" tag instead of "img", but the symptom was the same. It works on outlook but not Gmail.
It takes me an hour to realize. Sigh, such a waste of time.
So make sure the tag is "img" not "image" as well.
My issue was similar.
This is what my experience has been on testing the IMG tag on gmail
(assuming most of the organization's would have a dev qa and prod server.)
I had to send emails to customers on their personal email id's and we could see that gmail would add something of its own like following to src attribute of img tag. Now when we were sending these images from our dev environment they would never render on gmail and we were always curious why?
https://ci7.googleusercontent.com/proxy/AEF54znasdUhUYhuHuHuhHkHfT7u2w5zsOnWJ7k1MwrKe8pP69hY9W9eo8_n6-tW0KdSIaG4qaBEbcXue74nbVBysdfqweAsNNmmmJyTB-JQzcgn1j=s0-d-e2-ft#https://www.prodserver.com/Folder1/Images/OurImage.PNG
so an image sent to my gmail id as following never worked for me
<img src="https://ci7.googleuser....Blah.Blah..https://devserver.com/Folder1/Images/OurImage.PNG">
and our dev server we can't render this image by hitting following URL on Chrome(or any browser).
https://www.devserver.com/folder1/folder2/myactualimage.jpg
now as long as the src has www on it worked all the time and we didnt had to add any other attributes.
<img src="https://www.**prodserver**.com/folder1/folder2/myactualimage.jpg">
I was using Cloudflare. As soon as I disabled the proxy for my host's website IP address images in Gmail appeared immediately.
I have now added a new firewall rule to allow requests where the URI contains 'googleimageproxy' and everything is working fine.
I am even later to this party, but after spending about 2 hours trying everything imaginable and not having any luck, I finally realized it will work if I upload the pics to GOOGLE PHOTOS instead of GOOGLE DRIVE. Then I can right-click on the pic, copy the address, paste it in, and it works beautifully.
In backend i created endpoint for showing images. Laravel code looks like:
public function getImage($name)
{
return response()->file(base_path() . '/resources/img/' . $name . '.png');
}
Then in my html email template i created div with background-image.
<div style='background: url("https://mysite1.com/api/v1/get_image/logo")'></div>
And it's works for me.
I tried another image from internet which url starts https://
it worked on gmail and outlook.
get your images from domain which has SSL.
For me, the problem was using images name as equity investments.png . I switched them to equity_investments.png and it worked.
Not working :-
<img src="https://xxxxxxx.com/webinar_images/equity investments.png" alt="" />
Working :-
<img src="https://xxxxxx.com/webinar_images/equity_investments.png" alt="" />
I tried all the suggestions this thread (setting width, height, title, full url, etc). The final fix for me was switching from SVG to PNG did the trick for me.
I then tried removing all the other extra decorators (title, display block), and it still worked as long as I left the image type as PNG. So, PNG seems to be the only required change.
I'm attempting to send HTML formatted emails using C# 3 via Outlook.MailItem
Outlook.MailItem objMail = (Outlook.MailItem)olkApp.CreateItem(Outlook.OlItemType.olMailItem);
objMail.To = to;
objMail.Subject = subject;
objMail.HTMLBody = htmlBody;
The email is generated externally by saving from an RTF control (TX Text Control), which yields HTML with links to images stored in a <<FileName>>_files subdirectory. Example:
<img border="0" src="file:///C:/Documents%20and%20Settings/ItsMe/Local%20Settings/Temp/2/zbt4dmvs_Images/zbt4dmvs_1.png" width="94" height="94" alt="[image]">
Sending the email this way generates a mail with broken links.
Using Outlook 2007 as the email client with Word as the email editor, switching to RTF (Options tab, Format tab group) preserves the layout and inlines the images.
Programmatically doing this via:
var oldFormat = objMail.BodyFormat;
objMail.BodyFormat = Outlook.OlBodyFormat.olFormatRichText;
objMail.BodyFormat = oldFormat;
loses the formatting and mangles the images (the image becomes a [image] link marker on screen which is clickable but no longer shows the image). This isn't a surprise given that the documentation for MailItem.BodyFormat Property says "All text formatting will be lost when the BodyFormat property is switched from RTF to HTML and vice-versa".
Sadly there doesnt seem to be an easy way to change the Type of each Attachment in the MailItem.Attachements to OlAttachmentType.olByValue, as it's a read-only property that's set when you create the Attachment.
An approach that comes to mind is to walk the HTML, replacing the <img> tags with markers and programatically walking the MailItem text, inserting an Outlook.Attachment of Type OlAttachmentType.olByValue.
Another option is to convert the <img> links to use src="cid:uniqueIdN" and add the images as attachments with the referenced identities.
So, to the question... Is there a way to get the linked images converted to embedded images, ideally without getting into third party tools like Redemption? Converting to RTF happens to yield the outcome, but doing it that way is by no means a pre-requisite, and obviously may lose fidelity - I Just Want It to Just Work :D Neither of my existing ideas sound Clean to me.
Since you are using .net > 2.0, you may want to look into the System.Net.Mail namespace for the creation of mail messages. I have found that its quite customizable and was very easy to use for a task similar to yours. The only problems that I had was making sure I was using the right encoding, and I had to use HTML tables for layouts (css would not work right). Here are some links to show you how this works...
Basic
With multiple views (Plain Text and HTML)
If that's not an option, then I would recommend going the Content ID route and embedding the images as attachments. Your other option is to host the images publicly on a website, and change the image links in the html to the public images.
Something that you should be cognizant about is that HTML emails can easily look like spam and can be treated as such by email servers and clients. Even ones that are just for in-house usage (its happened to me) can end up in Outlook's Junk Mail folder..
DOH!, actually sending the email in Outlook 2007 forces the images to become embedded.
The Sent Item size of 8K is a lot smaller than the draft size of 60K (RTF) I was seeing vs the draft size of 1K (HTML that hadn't been converted to RTF and back again).
So it was Doing What I Mean all the time. Grr.
I'll leave the Q and the A up here in case it helps someone of a similarly confused state of mind.
BTW some useful links I found on my journey:
Sending emails example
General Q&A site with other examples of varying quality