Embed images into an HTML email with Xamarin.iOS - html

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.

Related

How tell Outlook where image files are?

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.

What is the recommended way for sending personalized images in html emails?

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

HTML image not showing in Gmail

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.

URLENCODE Variable in Salesforce Vertical Response Email

This is a rather simple question, but I cannot find documentation about it from Salesforce.
I am setting up an HTML Newsletter from Salesforce Vertical Response, and I need to put a link in the body of the email that goes to another site which takes the user's email address as a query string. I am doing this so that when the user clicks the link from the HTML email, they will automatically be signed up for a different blog mailing list.
The link will look like this www.mywebsite.com/blog/subscribe?email=your_email#email.com.
I can easily accomplish this by using the {EMAIL_ADDRESS} variable, such that the link looks like this:
Subsribe
This workds, but when the user gets the email and clicks the link, the '#' symbol gets stripped from the URL. Now I'm trying to figure out how to get around this. I saw some documentation on the URLENCODE() function for SalesForce, but when I try to use it in the HTML email editor in SalesForce, like URLENCODE({EMAIL_ADDRESS})it doesn't execute it, and instead interprets it literally as text. Can anyone help me? is it even possible to use functions from within the SalesForce HTML email editor?
Thanks
I havent used VerticalResponse, but if it leans on salesforce communication templates then you can always create an email template as Visualforce page. Then you can apply Encode functions to merge fields.
I'm glad you were able to find a workaround. If you ever go back to dealing with the URL, it's a good idea to disable our click-tracking when working with merge fields. This can be accomplished by adding nr_ before the http. Example: Subsribe - If you ever try that and it doesn't work, or if you have any other questions, please let us know via one of our Support channels:
support#verticalresponse.com
866-683-7842 x1
We also have live chat available: http://help.verticalresponse.com/
Regards,
Keith Gluck
VerticalResponse Customer Support

WebSockets-Sending image to Clients connected

This is my first post on stackoverflow.com so I will try to be straightforward.
I have to develop a functionality of an webapp using websockets.I am able to send text data
using websockets,but not an image.I've looked and tryied different possibilies,but couldn't make it work.The processing of the image has to be in javascript.
Please help me if you have a solution.
Thanks.
Update : I've succeded to send an image with websockets using the FileReader Api of HTML5.
Thanks to everyone.
Websockects can't send images or anything else than binary data. You can solve this by converting the image runtime to Base64 data and decoding it through javascript to an image.
There are a lot of examples of how to decode a Base64 encoded image, but you can also embed it in the image src directly: <img src="data:image/png;base64,xxxxxxxxxxxxxxxxxx" /> where you replace the x'es with your Base64 data.