Search code examples
c#htmlasp.netemailhtml-email

Daily program to send reminder emails isn't showing embedded image

I have a program to go off daily to send reminder emails to the people registered for an event. Everything works except the image keeps showing as broken. I'm using C# .NET Core. Below is the html.

The file structure is:

  • Service
    • Email
      • ReminderEmail.cs
  • wwwroot
    • img
      • email-logo.png
string body = @"
<html>
    <body>
        <img src='wwwroot/img/email-logo.png' width=300 height=100 />
        <p style='color: black;'>Just a reminder, the program you are scheduled to attend is starting soon, the details for your group are below. We look forward to working with you.</p>
            
        <p style='color: black;'><strong>FULL HOCKEY EQUIPMENT</strong>, including your hockey stick, is required. Please arrive approximately 30 minutes prior to the program on the first day so we can get you checked in, and you have time to get dressed. Please bring a water bottle with you and set it on the bench during the session.</p>
            
        <p style='color: black;'>If you are interested in our <strong>testing system</strong> or <strong>video analysis</strong>, please see the instructor at your program.<br />    
        <a href='https://prostrideskating.com/ProgramEvents/Testing'>Learn More About Testing System</a><br />
        <a href='https://prostrideskating.com/VideoAnalysis'>Learn More About Video Analysis</a></p>

            
        <p><mark><strong>Program</strong><br />
        Set Name: {programSetName}<br />
        Event Start: {formattedStartDate}<br />
        Event End: {formattedEndDate}<br />
        Details: {details}</mark></p>
         
        <p><mark><strong>Location</strong><br />
        {locationName}<br />
        {address}<br />
        {city}, {state} {postalCode}<br />
        {country}</mark></p>
            
        <p style='color: black;'>If for any reason you cannot attend, please refer to our <a href='https://www.prostrideskating.com/Terms'>cancellation policy</a> and contact us prior to the start of the program.</p

        <hr />

        <p style='color: black;'>Pro Stride Elite Skating<br />
        <a href='www.prostrideskating.com'>www.prostrideskating.com</a><br />
        Office: 508-406-7552<br />
        Email: <a href='mailto:Info@prostrideskating.com'>Info@prostrideskating.com</a></p>
    </body>
</html>";"

Here's the code for sending the email:

var mail = new MimeMessage();
                mail.From.Add(new MailboxAddress("name", username));
                mail.To.Add(new MailboxAddress(email, email));
                //mail.Cc.Add(new MailboxAddress("name", "email@gmail.com"));
                mail.Subject = "Subject"
                mail.Body = new TextPart("html")
                {
                    Text = body
                };

I tested the path to make sure it was right and it looks like it is. I tried converting it to a base64 string like:

string imagePath = "wwwroot/img/email-logo.png";

// Read the content of the image file
byte[] imageBytes = System.IO.File.ReadAllBytes(imagePath);

// Convert the byte array to a base64 string
string base64String = Convert.ToBase64String(imageBytes);

//html code
<html>
  <body>
    <img src='data:image/png;base64,base64String' width=100 height=30 />
... rest of code

and the email showed the base64 string and NOT the image, which isn't correct neither.

Solution

  • You should send image in email as external path not the project document root. in local html you may find the path as project is running but for outside network that image should be hosted on external URL and you need to pass that URL in img src

        <img src='wwwroot/img/email-logo.png' width=300 height=100 />

    to

        <img src='http://yourdomain.com/img/email-logo.png' width=300 height=100 />

    this should work

    also requires

    mail.IsBodyHtml = true;

    in your C# code to send mail as in HTML format to display images.