Login/Register
Unable to send embedded image in email using FluentEmail
Asked Answered
emailhtml-emailasp.net-core-2.0fluent-interface
C

1

9

I'm using FluentEmail in ASP.NET core 2.0 class library which will be sending the Email notification.

Below is the sample code I have tried till now:

using FluentEmail.Core;
using FluentEmail.Razor;
using FluentEmail.Smtp;
using System;
using System.IO;
using System.Net.Mail;
using System.Net.Mime;

namespace FluentEmail
{
    public class EmailNotification : IEmailNotification
    {
        public bool SendEmailNotification()
        {
            try
            {
                //Setup Default sender befault sending the email.
                SmtpClient smtpClient = new SmtpClient
                {
                   Host = "smtp.office365.com",
                   Port = 587,
                   EnableSsl = true,
                   Credentials = new System.Net.NetworkCredential("username", "Password")
                };
                Email.DefaultSender = new SmtpSender(smtpClient);

                Email.DefaultRenderer = new RazorRenderer();

                string imagePath = @"C:\Users\pratik.soni\Downloads\FluentLogo.png";

                Stream stream = new FileStream(imagePath, FileMode.Open, FileAccess.Read);
                stream.Flush();
                stream.Seek(0, SeekOrigin.Begin);

                var attachment = new Core.Models.Attachment()
                {
                    Data = stream,
                    ContentType = "image/png",
                    Filename = "FluentLogo.png",
                    IsInline = true
                };

                var email = Email
                  .From("[email protected]")
                  .To("[email protected]")
                  .Subject("Test")
                  .Body("<html>Inline image here: <img src=\"cid:FluentLogo.png\">" +
                    "<p>You should see an image without an attachment, or without a download prompt, dependig on the email client.</p></html>", true);

                email.Attach(attachment);
                email.Send();
                return true;
            }
            catch (Exception ex)
            {
                return false;
            }

        }
    }
}

My HTML file is as follow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>FluentEmail - Test with template and attachment</title>
</head>
<body style="margin: 0; padding: 0; background-color: #e5e5e5;" marginheight="0" topmargin="0" marginwidth="0" leftmargin="0">
<!--100% body table-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td bgcolor="#d8e7ea" style="background-color: #e5e5e5;">
            <!--intro-->
            <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td valign="middle" width="11" height="100"></td>
                    <td valign="middle" height="100">
                        <!--break-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td height="25"></td>
                            </tr>
                        </table>
                        <!--/break-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td width="59%" height="100">
                                    <table width="280" border="0" cellspacing="0" cellpadding="20">
                                        <tr>
                                            <td bgcolor="#333333">
                                                <h1 style="font-family: Arial, Helvetica, sans-serif; font-size: 42px; margin: 0; padding: 0; color: #fff;">Typographic</h1>
                                                <p style="text-transform: uppercase; font-size: 14px;  color: #fff; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;">
                                                    <currentdayname>
                                                    <currentday>
                                                    <currentmonthname>
                                                    <currentyear>
                                                </p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td width="41%" height="100" valign="top">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td valign="bottom" height="70">
                                                <p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333; text-transform: uppercase; margin: 0; padding: 0;"> Email not looking beautiful?<br>
                                                    <webversion style="text-decoration: none; color: #cc0000">View it in your browser</webversion>
                                                </p>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                        <!--break-->
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td height="25"></td>
                            </tr>
                        </table>
                        <!--/break-->
                    </td>
                </tr>
            </table>
            <!--/intro-->
            <!--content section-->
            <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td height="82" width="11" valign="middle"></td>
                    <td height="82" bgcolor="#FFFFFF" valign="middle">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                <td valign="middle" height="37" bgcolor="#fef041">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td bgcolor="#ffffff" width="25" height="37"></td>
                                            <td width="15" height="37"></td>
                                            <td>
                                                <h2 style="color: #333333 !important; font-size: 21px; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; text-shadow: 1px 1px 1px #fff;"> @Model.Title</h2>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td valign="top"></td>
                    <td bgcolor="#FFFFFF" valign="top">
                        <table width="560" border="0" align="center" cellpadding="0" cellspacing="0">
                            <tr>
                                <td valign="top">
                                    <p style="font-size: 14px; color: #333333; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif;"> Dear @Model.Name, You are totally @Model.Compliment. </p>
                                    <br>
                                    <table bgcolor="#000000" width="540" border="0" cellspacing="10" cellpadding="0">
                                        <tr>
											<td>
												<img src=\"cid:@Model.ImgSrc\">
											</td>
										</tr>
										<tr>
                                            <td width="540" height="158"><img style="margin: 0; padding: 0; display: block;" border="0" src="C:\Users\pratik.soni\Downloads\2016-fluent-logo-design-digital-marketing-20nine-4.png" width="540" height="158" alt="img1"></td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!--/100% body table-->
</body>
</html>

I have also tried with only passing image path to the imgsrc in html but that is also not working.

Please let me know what I'm missing in here.

Also, is there any such package like FluentEmail which can provide such all facility with ASP.NET Core 2.0?

Cauvery answered 17/5, 2018 at 6:50 Comment(4)
REF: github.com/lukencode/FluentEmail/issues/101 – Cauvery
Even if are able to embed images to an email there are very patchy support for rendering. Campaign monitor has an article here which shows each client and if it renders embedded images properly. – Producer
Yes, that's correct but if the client wants something we have to provide that right? :) But yes, thnx for sharing the information @Syfer. – Cauvery
You can provide but before you provide you have to tell them if they are adamant and only want embedded images then they can say goodbye to users who are using non supported email clients as they will not see the image(s). As an email dev its our job to educate them and tell them what works and what doesn't (you know that i know). – Producer
T
0

You have to use a LinkedResource; have a look at this

using (LinkedResource image = new LinkedResource(@"c:\assets\image.jpg", "image/jpeg") { ContentId = "myimage" })
using (MailMessage mail = new MailMessage())
using (SmtpClient smtpClient = new SmtpClient())
{
    smtpClient.Host = "smtp.alfki.com";

    String body = @"
    <html>
        <head></head>
        <body>    
        <img src=""cid:myimage"" />      
        </body>
    </html>
    ";  

    AlternateView view = AlternateView.CreateAlternateViewFromString(body, null, "text/html");
    view.LinkedResources.Add(image);

    mail.IsBodyHtml = true;
    mail.AlternateViews.Add(view);
    mail.From = new MailAddress("[email protected]");
    mail.To.Add("[email protected]");
    mail.Subject = "An email with an inline image";

    smtpClient.Send(mail);
}

Edit:

It works in .NET Core/Standard.

I can not speak for FluentMail; maybe you can do without?

Timepiece answered 28/5, 2018 at 11:3 Comment(8)
Yes, I know that it can be done without FluentEmail. But the concern here is it has to be done with FluentEmail, otherwise, I have already sample code ready using other approaches. – Cauvery
OK, but I read "is there any such package like ..." and therefor decided to let you know it can be done without. Any good reasons to stick with FluentMail? – Timepiece
Client's requirement! Can't help it. They want it to be "fluent". Anyway, I have found some other fluent option i.e. EmaFluent. The only issue I'm facing with it is not all supporting all its functionality with Asp.Net Core 2.0. Though it is providing enough options for me what I want. The concern is it is displaying a small warning message on package. – Cauvery
If a commerical library is an option; have a look at Limilabs Mail.dll with support for .NET Core 2.0+ and .NET Standard 2.0+. There is a fluent example to embed an image here. – Timepiece
Commercials are not options. I have tried that too. :) Even in free-packages, I have suggested MailKit / MimeKit which is allowing all the facilities in free (as per my knowledge). – Cauvery
Even in this FluentEmail if we had MailGun option is available then we could have send image in inline body. But this option is rejected too. – Cauvery
Client is king! You noticed that EmaFluent is quite outdated ; I see 2014 on NuGet. – Timepiece
Let us continue this discussion in chat. – Cauvery

© 2022 - 2024 — McMap. All rights reserved.