Embedding an image within an email

Not to long ago I remember seeing a post on the ASP.NET forums where someone had a need to embed an image within an email that they generated from their web application. I decided to put together a short sample that does just that. Using the code I'll provide you can embed an image within your email, so that when you open the email up with in Yahoo's Webmail client or any other Web based email client the image will be displayed in-line as opposed to being sent as an attachment. This code is just a sample and can be further improved, but it should get you started. I have verified that the image is embedded in-line when sent to GMail, Yahoo, and Hotmail.

Here is the Sample's HTML.

NOTE: Make sure to add the attribute ValidateRequest="false" to the Page Directive. This is so that you can embeded HTML into your email message. Also please beware that this will also allow for XSS via Javascript.

    <div>
<div>
<asp:Label ID="ToLabel" runat="server" Style="padding-left: 1.8em" Text="To:" />
<asp:TextBox ID="ToTextBox" runat="server" />
</div>
<div>
<asp:Label ID="FromLabel" runat="server" Style="padding-left: .8em" Text="From:" />
<asp:TextBox ID="FromTextBox" runat="server" />
</div>
<div>
<asp:Label ID="SubjectLabel" runat="server" Text="Subject:" />
<asp:TextBox ID="SubjectTextBox" runat="server" />
</div>
<div>
<asp:Label ID="BodyLabel" runat="server" Style="padding-left: .8em" Text="Body:" />
<asp:TextBox ID="BodyTextBox" runat="server" TextMode="MultiLine" Width="250px" Height="100px" />
<asp:Image ID="SelectedImage" runat="server" style="left: 200px; top: 200px;"
Height="100px" Width="100px" />
</div>
<div>
<br />
<asp:Button ID="SendButton" runat="server" Style="margin-left: 10em"
Text="Send" onclick="SendButton_Click" />
</div>
<div>
<br />
<div style="width: 550px; overflow: scroll; height: 100px;">
<asp:DataList ID="ImageDataList" runat="server" BackColor="White"
BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4"
ForeColor="Black" GridLines="Horizontal" HorizontalAlign="Center"
RepeatDirection="Horizontal" Height="90px" Width="500px"
onitemcommand="ImageDataList_ItemCommand">
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<SelectedItemStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
<ItemTemplate>
<asp:ImageButton ID="ProfileImageButton" runat="server"
ImageUrl='<%# Eval("FullName") %>' />
</ItemTemplate>
</asp:DataList>
</div>
</div>
</div>
<br />
<asp:Label ID="StatusLabel" runat="server" />

Here's the Sample's Code make sure to include the following namespaces.

using System.IO;
using System.Net;
using System.Net.Mail;

protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
StatusLabel.Visible = false;
DirectoryInfo dir = new DirectoryInfo(Server.MapPath("~/Images"));
int total = dir.GetFiles("*.jpg").Length;
if (total > 3)
{
ImageDataList.RepeatColumns = total + 1;
}

ImageDataList.DataSource = dir.GetFiles("*.jpg");
ImageDataList.DataBind();
}
}

protected void SendButton_Click(object sender, EventArgs e)
{
NetworkCredential loginInfo = new NetworkCredential("username@gmail.com", "yourGMailPassword");
MailMessage msg = new MailMessage();
msg.To.Add(new MailAddress(Server.HtmlEncode(ToTextBox.Text)));
msg.From = new MailAddress(Server.HtmlEncode(FromTextBox.Text));
msg.Subject = Server.HtmlEncode(SubjectTextBox.Text);
msg.Body = BodyTextBox.Text;

AlternateView body = AlternateView.CreateAlternateViewFromString(msg.Subject + "<br /><br />" + msg.Body + "<br /><br /><img src=cid:profile />", null, "text/html");
try
{
LinkedResource profileImg = new LinkedResource(SelectedImage.ImageUrl);
profileImg.ContentId = "profile";
body.LinkedResources.Add(profileImg);
}
catch (ArgumentException argEx)
{
StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#CC0033");
StatusLabel.Text = "An image was not selected.";
return;
}
catch (Exception ex)
{
StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#CC0033");
StatusLabel.Text = "The following error occurred: " + "<br /><br />" + ex.Message;
}

msg.AlternateViews.Add(body);
msg.IsBodyHtml = true;

SmtpClient client = new SmtpClient("smtp.gmail.com", 587);
client.EnableSsl = true;
client.UseDefaultCredentials = false;
client.Credentials = loginInfo;

try
{
client.Send(msg);
}
catch (SmtpException smtpEx)
{
StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#CC0033");
StatusLabel.Text = "The following error occurred: " + "<br /><br />" + smtpEx.Message;
}
catch (Exception ex)
{
StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#CC0033");
StatusLabel.Text = "The following error occurred: " + "<br /><br />" + ex.Message;
}

StatusLabel.Visible = true;
StatusLabel.Style.Add("color", "#009966");
StatusLabel.Text = "Email sent successfully.";
}

protected void ImageDataList_ItemCommand(object source, DataListCommandEventArgs e)
{
SelectedImage.ImageUrl = ((ImageButton)e.CommandSource).ImageUrl;
}