Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Base64 HTML embedded images not showing when mailed

Tags:

ios

iphone

ipad

I am embedding images that have been base64 encoded in HTML as follows:

[html appendFormat:@"<html><body><p><b><img src=\"data:image/png;base64,%@\"></b></p></body><html>", base64ImageString];

I then create a new email as follows:

MFMailComposeViewController *mailVC = [[MFMailComposeViewController alloc] init];
mailVC.mailComposeDelegate = self;
[mailVC setMessageBody:html isHTML:YES];
[self presentModalViewController:mailVC animated:YES];

The embedded image does show up in the new email before it is sent, but is not displayed in any email client to which the mail is delivered. I would think the fact that the image properly shows in the draft shows that the embedding process is successful, but I dont understand why it does not show when delivered. Looking at the raw HTML in the delivered mail shows: src="cid:(null)" Any help would be appreciated please!

like image 824
RunLoop Avatar asked Jan 12 '12 14:01

RunLoop


People also ask

Why is image not showing in HTML email?

There are two things you can do to fix an HTML image not showing up on the browser: Check the src path to of the <img> tag. Check the cache of the website on the production host.

Does Outlook block Base64 image?

We are using SendGrid to send emails to the Outlook platform. But, designed the email template using SendGrid dynamic template.

How do I display an image in base 64 HTML?

Images encoded with Base64 can be embedded in HTML by using the <img> tag. This can help to increase the page load time for smaller images by saving the browser from making additional HTTP requests.

Does Gmail display Base64?

Hi @Anonymous , As I can find, base64 encoded images are not supported in Gmail (from years ago on). Hope this helps.


1 Answers

I stumbled into this same problem and the solution was rather convoluted. It is possible to embed an image in an email. The problem is that for some weird reason the base64 encoded image must not contain new lines (super odd! I know). I'm guessing you are using the NSData+Base64 by Matt Gallagher? So was I! This category creates a multi-line base64 string. The code in the category is

- (NSString *)base64EncodedString
{
    size_t outputLength;
    char *outputBuffer =
        NewBase64Encode([self bytes], [self length], true, &outputLength);

    NSString *result =
        [[NSString alloc]
            initWithBytes:outputBuffer
            length:outputLength
            encoding:NSASCIIStringEncoding];
    free(outputBuffer);
    return result;
}

By replacing the third parameter of NewBase64Encode to false you will get a single line base64 string and that worked for me. I ended up creating a new function (just not to break anything else!) within the category.

- (NSString *)base64EncodedStringSingleLine
{
    size_t outputLength;
    char *outputBuffer =
    NewBase64Encode([self bytes], [self length], false, &outputLength);

    NSString *result =
    [[NSString alloc]
     initWithBytes:outputBuffer
     length:outputLength
     encoding:NSASCIIStringEncoding];
    free(outputBuffer);
    return result;
}

Using this function to encode the UIImage's NSData worked fine. The email clients I have tested so far all show the embedded image. Hope it works for you!

Edit: As pointed out in the comments, this solution is only partial. The image will be attached as a Data URI in the email. However, not all email clients will display the embedded image.

like image 101
fsaint Avatar answered Oct 13 '22 22:10

fsaint