SendGrid - Image not showing up in HTML email

Question

I am using the SendGrid v3 API and C# library (v7) to send an email. In my email I have a header which is a png. The header is embedded like this:

<img src="cid:emailheader"/>

In the C# code I send the image as an attachment with with the same ContentId

var mail = new Mail(from, subject, to, content);

var headerPath = HttpContext.Current.Server.MapPath("~/Resources/email-header.png");

var attachment = new SendGrid.Helpers.Mail.Attachment();
attachment.ContentId = "emailheader";
attachment.Content = Convert.ToBase64String(File.ReadAllBytes(headerPath));
attachment.Type = "image/png";
attachment.Filename = "email-header.png";
mail.AddAttachment(attachment);

var send = sg.client.mail.send.post(requestBody: mail.Get());

Yet when I open the email it says the source is not found, even though the image is correctly displayed in the attachment

I think you need to embed the image in HTML Mail Body instead of doing it as an attachment. — Krishnandu Sarkar, Aug 09 '16 at 09:02
I think you need to set the content disposition `inline` when attaching it to use it with a `cid`. See here : https://github.com/sendgrid/sendgrid-csharp/blob/master/SendGrid/SendGrid/Helpers/Mail/Mail.cs#L990 — Sebastian-Laurenţiu Plesciuc, Aug 09 '16 at 10:13

score 2 · Answer 1 · answered Aug 09 '16 at 09:33

I'm not the expert for Sendgrid, but I found on there blog post that this suggest to do inline encoding in your html directly. this way you don't need to add an attachment. (I'm use this quite a lot)

<img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgA...more encoding" />

Maybe this is a work around for you.

As an second alternative: for sending out emails with pictures I'm using

System.Net.Mail

here I do add an AlternateView with a linked resource.

AlternateView htmlView = AlternateView.CreateAlternateViewFromString(html, null, "text/html");
LinkedResource imageResource = new LinkedResource(Imagepath + "Monitoring.png", "image/png")
{
   ContentId = "1",
   TransferEncoding = System.Net.Mime.TransferEncoding.Base64
};
htmlView.LinkedResources.Add(imageResource);
message.AlternateViews.Add(htmlView);

the syntax in html is the same as you use

<img src="cid:1">

I hope this help. Butti

score 1 · Answer 2 · answered Jun 12 '18 at 23:06

node

 //imageData= "data:image/png;base64,ine793nfdsf......."

    imageb64 = imageData.replace('data:image/png;base64,' , ''); 
    //remove data:image/png;base64,            

    const msg = {
                to: 'example@gmail.com',
                from: 'test@gmail.com',
                subject: "image attached",
                html :'<img src="cid:myimagecid"/>',
                attachments: [
                  {
                    filename: "imageattachment.png",
                    content: imageb64,
                    content_id: "myimagecid",
                  }
                ]
              };

          sgMail.send(msg);

SendGrid - Image not showing up in HTML email

2 Answers2

Linked