CODEWITHSUNDEEP
htmlasp.net-mvcimagegmailhtml-email
chuckd
chuckd

Reputation: 14520

Gmail not showing embedded images in email

I've been looking at different threads online and here at SO discussing embedding images into email and why they don't always send the image. I'm embedding a base64 encoded string into an img tag and gmail is rejecting it. When I inspect the email the img src attribute is empty and some info has been added to the 'a' tag that represents it's parent element. I made sure to set my gmail setting to include external images! When I look at outlook.com emails they do send the image.

I've read that the email and image must come from a public server? Currently I'm sending the email from my localhost running iis (because I'm testing) and using sendgrid to send my emails.

Can anyone give me more advice on getting the image to display in my email in gmail's service?

FYI - Here is how I'm constructing the image tag. I've included different attributes in the img tag to get it to show but none of these attributes have worked for gmail. I also use '@Raw' because I'm constructing my email with razore engine nuget package and 'Html.Raw()' doesn't work with Razore Engine! The email text looks good before I send it to sendgrid for mailing it off and I see it image in outlook so I know the body is good.

<a href="www.mysite.com/Space/Public/@Model.SpaceId" target="_blank" class="thumbnail" style="margin-bottom: 0px;">
                                <img alt="SpaceImage" title="Space Image" style="display: block" width="225" height="225" src="data:image/jpg;base64,@Raw(Model.SpaceThumbnail)" />
                                <div class="caption">
                                    @Model.SpaceName
                                </div>
                            </a>

Upvotes: 0

Views: 3478

Answers (1)

Piyush Singh
Piyush Singh

Reputation: 67

Whenever we are sending emails, we have to embed the image for it to render successfully in most email clients including gmail. For asp.net it would be something like this:

    string html = @"<html><body><img src=\"cid:imageId\"></body></html>";
    AlternateView view = AlternateView.CreateAlternateViewFromString(html, null, MediaTypeNames.Text.Html);
    LinkedResource imageResource = new LinkedResource("yourImagePath", MediaTypeNames.Image.Jpeg);
    imageResource.ContentId = "imageId";
    view.LinkedResources.Add(imageResource);

Upvotes: 1

Related Questions