How to send an email with an image on the body using SMTP?

Question

I am trying to do an email sending verification module and I want to display my company label image at the beginning of the message but all the solutions I found is how to put an image attachment on the email.

What I'm trying to do is putting the Company Label image at the beginning of the message like this:

Here is my code :

Try
       Dim mm As New MailMessage 'Email of Sender'
       Dim NetworkCred As New NetworkCredential()
       Dim smtp As New SmtpClient()
       Dim img1 As LinkedResource = Nothing

       Try
           img1 = New LinkedResource("https://image.ibb.co/iowsbn/Umbrella_Corporation_Company_PNG.png", MediaTypeNames.Image.Jpeg)

           img1.ContentId = "Image1"
       Catch ex As Exception
           MetroMessageBox.Show(Login, ex.Message, "System Information", MessageBoxButtons.OK, MessageBoxIcon.Exclamation)
       End Try


       mm.From = New MailAddress("xxxxxxxxxxxxx@gmail.com", "Company")
       mm.[To].Add(New MailAddress(Login.MetroTextBox5.Text))

       mm.Subject = "Password Recovery"

       mm.Body = String.Format("") 'Message'

       mm.Body = mm.Body & "<font color=red> <h1> Dear " + firstname + " " + lastname + ", </h1> </font>"
       mm.Body = mm.Body & "<h3> The New Generated Password you need to Login into your Account is : </h3>"
       mm.Body = mm.Body & "<font color=red> <h1> " + lbl1.Text + " </h1> </font>"
       mm.Body = mm.Body & "This Email and Password was Generated upon your request. The Generated Password is required to complete the login."
       mm.Body = mm.Body & "<strong> No one can access your account without also accessing this email. <br> If you are not attempting to login </strong>"
       mm.Body = mm.Body & "then please change your password immediately and consider changing your email password as well to ensure your account security. </br>"
       mm.Body = mm.Body & "<td><img src=cid:Image1 alt=></td>"

       Dim av1 As AlternateView = AlternateView.CreateAlternateViewFromString(mm.Body, Nothing, MediaTypeNames.Text.Html)
       av1.LinkedResources.Add(img1)

       mm.AlternateViews.Add(av1)

       mm.IsBodyHtml = True
       smtp.Host = "smtp.gmail.com"
       smtp.EnableSsl = True
       smtp.Port = 587

       NetworkCred.UserName = "xxxxxxxxxxxxx@gmail.com"
       NetworkCred.Password = "xxxxxxxxxx"
       smtp.UseDefaultCredentials = True
       smtp.Credentials = NetworkCred
       smtp.Send(mm)

Catch ex As Exception
   MetroMessageBox.Show(Login, ex.Message, "System Information", MessageBoxButtons.OK, MessageBoxIcon.Exclamation)
End Try

You can't use your local file. If you are using localhost now you should save your image in some image hosting and use full path like `"https://hosting.com/image.png"` for img src — v.slobodzian, Apr 14 '18 at 22:31
@v.slobodzian is it, so that the Image will immediately pop out like I wanted if I do image hosting? If so, how can I do that for free — Lucifer Rodstark, Apr 14 '18 at 22:41
@v.slobodzian I tried to host an image using imgbb and changed my path to https://ibb.co/fyBfU7 and I am having an error that it's not a correct format — Lucifer Rodstark, Apr 14 '18 at 22:53
Html email has so many limitations. You can't use a lot of css and etc. You can read about this [here](https://kb.mailchimp.com/campaigns/design/limitations-of-html-email) — v.slobodzian, Apr 14 '18 at 23:12
@v.slobodzian I did put the extensions, I mean the https:/ I put it in my code and it turns blue text with underline then if I try to send an email an error will pop up saying it’s not a correct format — Lucifer Rodstark, Apr 14 '18 at 23:14
@v.slobodzian I won’t put any css, I think the Company Logo Image is enough for me and some warning images — Lucifer Rodstark, Apr 14 '18 at 23:16
Don't know about VB but using C# you should use @ before string with special symbols like a \. Or you can use \ before every special symbol. It looks like "http:\\\\site.com\\image.png" — v.slobodzian, Apr 14 '18 at 23:20
It happens because \ is used for special things like tab \t and line wrap \n\r — v.slobodzian, Apr 14 '18 at 23:21
@VisualVincent can you teach me how to do it on vb then? I am trying to copy and paste the image link on my code but it has an error saying the format is wrong — Lucifer Rodstark, Apr 15 '18 at 09:07
@Lucifer : What v.slobodzian means is that you need a _**direct**_ link to the image. The link you have now points to a website _containing_ the image, not to the actual _image file_. However you shouldn't need to do this as the `cid` method should work. — Visual Vincent, Apr 15 '18 at 09:08
@VisualVincent so what’s the right way to do it then? Can you post an answer and modify mg code? — Lucifer Rodstark, Apr 15 '18 at 09:12
@VisualVincent btw the error shows as "The Path's Format is not Supported" using my image's direct link "https://image.ibb.co/iowsbn/Umbrella_Corporation_Company_PNG.png" — Lucifer Rodstark, Apr 15 '18 at 09:37

v.slobodzian · Answer 1 · 2018-04-15T10:50:58.073

3

To attach an embedded image to email, you should add an attachment to email at first. Then you should assign a unique identifier(contentid) to this attachment. Finally, you should use <img src="cid:yourcontentid" /> instead of <img src="your file name" /> .

Dim oAttachment As Attachment = oMail.AddAttachment("d:\test.gif")

        Dim contentID As String = "test001@host"
        oAttachment.ContentID = contentID
        oMail.HtmlBody = "<html><body>this is a <img src=""cid:" _
                 & contentID & """> embedded picture.</body></html>"

        oSmtp.SendMail(oServer, oMail)

I have found a few links for you:

It just would helpful for you:

A complete breakdown of the CSS support for the most popular mobile, web and desktop email clients

edited Apr 15 '18 at 10:50

answered Apr 15 '18 at 09:28

v.slobodzian

453
6
16

You actually don't need to add it as an attachment if you don't want to (see: https://stackoverflow.com/a/11000938). However his problem could be that he is not using a unique ID. -- By the way in VB.NET strings should be concatenated with `&` rather than `+`. – Visual Vincent Apr 15 '18 at 09:38
@VisualVincent If I'm not right, you can edit my answer, add your links and etc, it's okay. – v.slobodzian Apr 15 '18 at 09:41
1

You are, but that's not what edits are for :). I'm going to try to solve the problem with his initial code so I'll be writing my own answer anyway. – Visual Vincent Apr 15 '18 at 09:55

Visual Vincent · Accepted Answer · 2018-04-15T10:56:28.117

3

I don't understand why I didn't see this earlier...

You have a typo here:

img1.ContentId = "Image 1"

You give the image ID Image 1, but in your HTML code you are referencing Image1:

mm.Body = mm.Body & "<td><img src=cid:Image1 alt=></td>"

Simply change the first line to:

img1.ContentId = "Image1"

and it works!

edited Apr 15 '18 at 10:56

answered Apr 15 '18 at 10:12

Visual Vincent

18,045
5
28
75

Can you screenshot the result? – Lucifer Rodstark Apr 15 '18 at 10:26
@LuciferRodstark : Why do you need a screenshot? It works for me, doesn't it for you? – Visual Vincent Apr 15 '18 at 10:38
because I’m not home till tomorrow – Lucifer Rodstark Apr 15 '18 at 10:39
@LuciferRodstark : Added one to the answer. – Visual Vincent Apr 15 '18 at 10:55
@LuciferRodstark : Sorry, but asking for it counts as voting fraud and I don't want to be involved in that. – Visual Vincent Apr 15 '18 at 21:48
@LuciferRodstark : No problem. Good luck! – Visual Vincent Apr 15 '18 at 21:52
I would like to ask you if you have any idea how can they generate those kinds of email I showed as reference in my post? Like I know that the header and footer are only images but the thing that confuses me is how can they code the dark colored panel at the center where the text are embedded and how it fits so well together with the header and footer images? – Lucifer Rodstark Apr 17 '18 at 16:48
@LuciferRodstark : By using HTML and CSS, which is far too broad to cover even in an answer. It's pure web design. You can inspect the source code of the e-mail in your browser. Google _"How to inspect elements in **[INSERT YOUR WEBBROWSER HERE]**"_. – Visual Vincent Apr 17 '18 at 17:53
@LuciferRodstark : The footer isn't an image by the way... Only the Valve logo is. The footer is simply an HTML element with its background color changed (as is the middle panel). – Visual Vincent Apr 17 '18 at 17:55
Yeah, I just inspected it a while ago and the only image was the header... And also their code is too prodigal to understand Is there an html code to set a panel size with a specific background color and absorb the body of the message. I think it is possible for me to do it with the idea of setting a panel size and background color then it will be a perfect fit to the header image and also if I like, I can also make the footer an image too so It can be an easier fit. My only problem is the syntax of that panel and how do text can be put inside it – Lucifer Rodstark Apr 17 '18 at 18:05
Break your requirements down into pieces and Google them. The so-called "panel" is a simple `
` element, which (like most elements) supports having text inside it. -- Also, no: Images are much harder to size-to-fit without them looking blurry or stretched out. Use divs for all that, then only use images for the logos themselves.
– Visual Vincent Apr 17 '18 at 18:09
I did it! Only thing that’s left is to host my logo, can you recommend some website good for free image hosting – Lucifer Rodstark Apr 18 '18 at 01:14
The most common one is probably [Imgur](https://imgur.com/), which Stack Overflow uses. To get a direct link either upload it via Stack Overflow or see this: https://webapps.stackexchange.com/a/95898 – Visual Vincent Apr 18 '18 at 05:29

How to send an email with an image on the body using SMTP?

2 Answers2