Question

I need to send an HTML report with images from an application. The report is laid out and an image is embedded within the report. When I preview the report in a web view, it appears correct, when I receive it by GMail, the styling and image is missing.

There’s a CSS stylesheet embedded within the header.

I’m sending out a report like this:

NSString* htmlReportString = [ReportManager createReportWithEvent:event];
[mailController addAttachmentData:[htmlReportString dataUsingEncoding:NSUTF8StringEncoding] mimeType:@"text/html" fileName:@"report.html"];
[mailController setMessageBody:htmlReportString isHTML:YES];

Here’s what I get out of a .plist and append as a report header

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>template1</key>
    <string>
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
&lt;title&gt;Report&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
.statHead {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
    color: #FFF;
}
.statSub {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #FFF;
}
.repHead {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #000;
}
.repSub {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #000;
}
.repLinks {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #000;
}
.repSubBullet {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #000;
    list-style-type: circle;
}
.repSubBold {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #000;
}
.topName {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 34px;
    font-weight: bold;
    color: #000;
}
.topDate {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #000;
}
.topSub {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #000;
}
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;</string>
</dict>
</plist>

When I preview the report within iPhone’s web view, it appears correct – all styles are present, the image is present. But when I receive the report in GMail, the image is missing and none of the styles are showing. If I save the report and view it on my Mac’s preview app, the report is displayed correctly once again.

What is causing this issue? Is it an encoding/ backslash issue or does Gmail treat HTML differently than Apple’s web browsers?

Answer 1

You have escaped HTML specialchars in your HTMl code, < etc. should be replaced to their official HTML equivalents, otherwise your HTML won’t work. That it’s working in the iOS browser sounds for me a bit strange.

Of course it could be also another problem…