How to add a image in email body using MFMailComposeViewController

I am trying to find out the best way to add an image inside the body of the email and not as attachment in ios.

1) Apple has provided a function "addAttachment" and the doc says, to add any image in the content, we should use this function, but I tried that function, and sent an mail, I checked on my browser, it is recieved as an attachment.

2) Secondly, many blogs say to use base64 encoding, but that also wont work, image is sent as a broken one.

So friends, please help me out to find the best available solution to do this.

Regards Ranjit


Set email format as HTML. This code is woking fine in my app.

MFMailComposeViewController *emailDialog = [[MFMailComposeViewController alloc] init];

NSString *htmlMsg = @"<html><body><p>This is your message</p></body></html>";

NSData *jpegData = UIImageJPEGRepresentation(emailImage, 1.0);

NSString *fileName = @"test";
fileName = [fileName stringByAppendingPathExtension:@"jpeg"];
[emailDialog addAttachmentData:jpegData mimeType:@"image/jpeg" fileName:fileName];

emailDialog setSubject:@"email subject"];
[emailDialog setMessageBody:htmlMsg isHTML:YES];


[self presentModalViewController:emailDialog animated:YES];
[emailDialog release];

Swift 5

import MessageUI

    func composeMail() {

        let mailComposeVC = MFMailComposeViewController()

        mailComposeVC.addAttachmentData(UIImage(named: "emailImage")!.jpegData(compressionQuality: CGFloat(1.0))!, mimeType: "image/jpeg", fileName:  "test.jpeg")

        mailComposeVC.setSubject("Email Subject")

        mailComposeVC.setMessageBody("<html><body><p>This is your message</p></body></html>", isHTML: true)

        self.present(mailComposeVC, animated: true, completion: nil)
    }

I just went through this recently for Swift.

Function to add photo to email in Swift:

func postEmail() {
    var mail:MFMailComposeViewController = MFMailComposeViewController()
    mail.mailComposeDelegate = self
    mail.setSubject("your subject here")

    var image = // your image here
    var imageString = returnEmailStringBase64EncodedImage(image)
    var emailBody = "<img src='data:image/png;base64,\(imageString)' width='\(image.size.width)' height='\(image.size.height)'>"

    mail.setMessageBody(emailBody, isHTML:true)

    self.presentViewController(mail, animated: true, completion:nil)
}

Function to return the formatted image:

func returnEmailStringBase64EncodedImage(image:UIImage) -> String {
    let imgData:NSData = UIImagePNGRepresentation(image)!;
    let dataString = imgData.base64EncodedStringWithOptions(NSDataBase64EncodingOptions(rawValue: 0))
    return dataString
}

I've found that (at least in my case) a PNG will work in the message composer but NOT when the message is opened / received by the user.

Composer Dandily showing logo PNG image!

Viewer Not so much logo images over here.

(Occasionally there will be a light blue outline where the image should be.)

Using the HTML body string below and the conversion below that seems to do the trick.


Message Body HTML String using JPEG

NSString *body = [NSString stringWithFormat:
                  @"\
                  <html>\
                    <body>\
                        Check out the App!\
                        <br>\
                        Isn't this a terriffic logo?!.\
                        <br>\
                        <img src = \"data:image/jpeg;base64,%@\" width = 100 height= 100>\
                        <br>\
                        <a href = \"%@\" > CLICK ITTTTTTT! </a>\
                    </body>\
                  </html>",
                  imageString, @"http://www.LOLamazingappLOL.com"];

Convert Image to string with JPEG Data

+ (NSString *)dataStringFromImage:(UIImage *)image
{
    NSData *imgData = UIImageJPEGRepresentation(image, 1);
    return [imgData base64EncodedStringWithOptions:kNilOptions];
}

Additional Info:

  • iOS Target = 8.0
  • iOS Device = 9.1
  • I am awful with HTML!

Thank you @Richard for the CORRECT answer to this question.


Few things to note: - Use addAttachmentData - use setMessageBody and set isHTML:true

you dont have to add manually in your email body. the api will take care of that.

func postEmail() {
var mail:MFMailComposeViewController = MFMailComposeViewController()
mail.mailComposeDelegate = self
mail.setSubject("your subject here")
var image = // your image here
var imageData = UIImageJPEGRepresentation(image, 1)
mail.addAttachmentData(imageData, mimeType:"image/jpeg", fileName:"Your Filename"
var emailBody = "<html><body><p>This is your message</p></body></html>"
mail.setMessageBody(emailBody, isHTML:true)

self.presentViewController(mail, animated: true, completion:nil)}