How to add image to email?

Question

Hi,

In my e-commerce application, I am sending an order confirmation email to the customer. I am using a html template for this e-mail. I couldn't figure out how to display the logo and ordered product image in the e-mail.

Here is the html template:




    
    Email Template for Order Confirmation Email
    
    
    


    
        
            
                
                    
                        
                            
                            
                                
                                    
                                        
                                            
                                                
                                                    
                                                
                                            
                                            
                                                
                                                    3828 Mall Road
                                                
                                            
                                            
                                                
                                                    123 Consectetur at ligula 10660
                                                
                                            
                                            
                                                
                                                    Phone: 010-020-0340 | Email:  info@company.com
                                                
                                            
                                            
                                                
                                                    Order Number: --OrderId-- | Order Date: --OrderDate--
                                                
                                            
                                        
                                    
                                
                            
                            
                            
                            
                                
                                    
                                        
                                            
                                                
                                                    Delivery Adderss
                                                
                                                
                                                    Billing Address
                                                
                                            
                                            
                                                
                                                    --Name--
                                                
                                                
                                                    --Name--
                                                
                                            
                                            
                                                
                                                    --Address--
                                                
                                                
                                                    --Address--
                                                
                                            
                                            
                                                
                                                    --City--
                                                
                                                
                                                    --City--
                                                
                                            
                                        
                                    
                                
                            
                            
                            
                            
                            
                                
                                    
                                        
                                            
                                                
                                                
                                                    Sub-Total:
                                                
                                                
                                                    --SubTotal--
                                                
                                            
                                            
                                                
                                                    Shipping Fee:
                                                
                                                
                                                    $5.00
                                                
                                            
                                            
                                                
                                                    Order Total
                                                
                                                
                                                    --Total--

Here is the e-mail method:

private async Task SendOrderConfirmationEmail(OrderHeaderDTO orderHeaderDTO)
{
    try
    {
        // Get the order for details in the template
        var orders = await _orderRepository.GetOrdersByUser(orderHeaderDTO.UserId);
        var order = orders.Where(o => o.OrderHeader.Id == orderHeaderDTO.Id).FirstOrDefault();
        // Construct the path to the file
        var pathToFile = Path.Combine("Templates", "EmailTemplate", "Confirmation_EmailTemplate.html");
        // Check if the file exists
        if (!System.IO.File.Exists(pathToFile))
        {
            throw new FileNotFoundException("The email template file was not found.", pathToFile);
        }
        var builder = new BodyBuilder();
        using (var SourceReader = System.IO.File.OpenText(pathToFile))
        {
            builder.HtmlBody = SourceReader.ReadToEnd();
        }
        var tableRows = new StringBuilder();
        foreach (var detail in order.OrderDetails)
        {
            tableRows.Append($@"
            
                
                    
                        
                            
                                
                                    
                                
                                
                                    {detail.ProductName}
                                
                            
                            
                                
                                    Quantity: {detail.Count}
                                
                                
                            
                            
                                
                                    Color: {detail.Product?.Color}
                                
                                
                                    {detail.Price.ToString("C", CultureInfo.InvariantCulture)} Per Unit
                                
                            
                            
                                
                                    Size: {detail.Size}
                                
                                
                                    {(detail.Price * detail.Count).ToString("C", CultureInfo.InvariantCulture)} Total
                                
                            
                        
                    
                
            ");
        }
        // Replace the placeholder in the HTML template with the generated tableRows
        builder.HtmlBody = builder.HtmlBody.Replace("", tableRows.ToString());
        builder.HtmlBody = builder.HtmlBody.Replace("--OrderId--", orderHeaderDTO.Id.ToString());
        builder.HtmlBody = builder.HtmlBody.Replace("--OrderDate--", orderHeaderDTO.OrderDate.ToString());
        builder.HtmlBody = builder.HtmlBody.Replace("--Name--", orderHeaderDTO.Name);
        builder.HtmlBody = builder.HtmlBody.Replace("--Address--", orderHeaderDTO.StreetAddress);
        builder.HtmlBody = builder.HtmlBody.Replace("--City--", orderHeaderDTO.City);
        builder.HtmlBody = builder.HtmlBody.Replace("--SubTotal--", orderHeaderDTO.OrderTotal.ToString("C", CultureInfo.InvariantCulture));
        builder.HtmlBody = builder.HtmlBody.Replace("--Total--", (orderHeaderDTO.OrderTotal
            + 5).ToString("C", CultureInfo.InvariantCulture));
        // Send the email
        await _emailSender.SendEmailAsync(orderHeaderDTO.Email, "Order Confirmation", builder.HtmlBody);
    }
    catch (Exception e)
    {
        throw new Exception(e.Message);
    }
}

public async Task SendEmailAsync(string email, string subject, string htmlMessage)
{
    try
    {
        var emailToSend = new MimeMessage();
        emailToSend.From.Add(MailboxAddress.Parse("test@test.com"));
        emailToSend.To.Add(MailboxAddress.Parse(email));
        emailToSend.Subject = subject;
        emailToSend.Body = new TextPart(MimeKit.Text.TextFormat.Html) { Text = htmlMessage };
        //send email
        using var emailClient = new SmtpClient();
        await emailClient.ConnectAsync("smtp.gmail.com", 587, MailKit.Security.SecureSocketOptions.StartTls);
        await emailClient.AuthenticateAsync("test@test.com", "test");
        await emailClient.SendAsync(emailToSend);
        await emailClient.DisconnectAsync(true);
    }
    catch (Exception)
    {
        throw;
    }
}

Hope you can help me.

Answer

I couldn't figure out how to display the logo and ordered product image in the e-mail.

Set an image tag's src attribute to the URL where the logo image is hosted.

https://www.w3schools.com/tags/tag_img.asp

Answer

While you can use a source url, most email system will suppress loading the image. You can use a data url:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs

the other approach is to add the image as an attachment and use a content id in the image reference.

https://sendgrid.com/en-us/blog/embedding-images-emails-facts

Answer

Hi Cenk, here's my test result, could you please help check it?

//using MimeKit.Utils;
//using MimeKit;
//using MailKit.Net.Smtp;
//using MailKit.Security;
public class SendEmailModel : PageModel
{
	private readonly IWebHostEnvironment _env;
	public SendEmailModel(IWebHostEnvironment webHostEnvironment)
	{
		_env = webHostEnvironment;
	}
	public async void OnGet()
	{
		string subject = "Test Email with HTML and Image";
		//html template
		string htmlContent = "Hello
This is a test email with an embedded image.
";
		//image path
		string imagePath = Path.Combine(_env.WebRootPath, "images", "Image3.jpg");
		//get image base64 string.
		byte[] fileContent = System.IO.File.ReadAllBytes(imagePath);
		string base64 = Convert.ToBase64String(fileContent);
		// Create a new MimeMessage
		var message = new MimeMessage();
		message.From.Add(new MailboxAddress("Your Name", "sender-email@example.com"));
		message.To.Add(new MailboxAddress("", "recipient@example.com"));
		message.Subject = subject;
		// Create the body builder
		var bodyBuilder = new BodyBuilder();
		// Set the HTML body
		bodyBuilder.HtmlBody = htmlContent;
		// Embed the image
		var image = bodyBuilder.LinkedResources.Add(imagePath);
		image.ContentId = MimeUtils.GenerateMessageId();
		// Replace the image src in the HTML content with the base64 string
		bodyBuilder.HtmlBody = bodyBuilder.HtmlBody.Replace("{image_src}", base64);
		// Set the message body
		message.Body = bodyBuilder.ToMessageBody();
		// Configure the SMTP client
		using var client = new SmtpClient();
		//in this sample, I'm using outlook to send the email, you can change it to yours.
		client.Connect("smtp.office365.com", 587, SecureSocketOptions.StartTls);
		client.Authenticate("sender-email@example.com", "your-password");
		// Send the message
		await client.SendAsync(message);
		client.Disconnect(true);
	}
}

User's image

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Tiny Wang

Share via

How to add image to email?

3 answers

Your answer