embedding image in html email

html image oracle email mime

495,870

Solution 1

Try to insert it directly, this way you can insert multiple images at various locations in the email.

<img src="data:image/jpg;base64,{{base64-data-string here}}" />

And to make this post usefully for others to: If you don't have a base64-data string, create one easily at: http://www.motobit.com/util/base64-decoder-encoder.asp from a image file.

Email source code looks something like this, but i really cant tell you what that boundary thing is for:

 To: [email protected]
 Subject: ...
 Content-Type: multipart/related;
 boundary="------------090303020209010600070908"

This is a multi-part message in MIME format.
--------------090303020209010600070908
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
  </head>
  <body bgcolor="#ffffff" text="#000000">
    <img src="cid:part1.06090408.01060107" alt="">
  </body>
</html>

--------------090303020209010600070908
Content-Type: image/png;
 name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline;
 filename="moz-screenshot.png"

[base64 image data here]

--------------090303020209010600070908--

//EDIT: Oh, i just realize if you insert the first code snippet from my post to write an email with thunderbird, thunderbird automatically changes the html code to look pretty much the same as the second code in my post.

Solution 2

The other solution is attaching the image as attachment and then referencing it html code using cid.

HTML Code:

<html>
    <head>
    </head>
    <body>
        <img width=100 height=100 id="1" src="cid:Logo.jpg">
    </body>
</html>

C# Code:

EmailMessage email = new EmailMessage(service);
email.Subject = "Email with Image";
email.Body = new MessageBody(BodyType.HTML, html);
email.ToRecipients.Add("[email protected]");
string file = @"C:\Users\acv\Pictures\Logo.jpg";
email.Attachments.AddFileAttachment("Logo.jpg", file);
email.Attachments[0].IsInline = true;
email.Attachments[0].ContentId = "Logo.jpg";
email.SendAndSaveCopy();

Solution 3

I don't find any of the answers here useful, so I am providing my solution.

The problem is that you are using multipart/related as the content type which is not good in this case. I am using multipart/mixed and inside it multipart/alternative (it works on most clients).

The message structure should be as follows:

[Headers]
Content-type:multipart/mixed; boundary="boundary1"
--boundary1
Content-type:multipart/alternative; boundary="boundary2"
--boundary2
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit
[HTML code with a href="cid:..."]

--boundary2
Content-Type: image/png;
name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline; filename="moz-screenshot.png"
[base64 image data here]

--boundary2--
--boundary1--

Then it will work

Solution 4

If it does not work, you may try one of these tools that convert the image to an HTML table (beware the size of your image though):

Solution 5

I know this is an old post, but the current answers dont address the fact that outlook and many other email providers dont support inline images or CID images. The most effective way to place images in emails is to host it online and place a link to it in the email. For small email lists a public dropbox works fine. This also keeps the email size down.

View more solutions

495,870

Author by

tbone

A software developer who wears many hats

Updated on June 23, 2021

Comments

tbone almost 3 years
I'm trying to send a multipart/related html email with embedded gif images. This email is generated using Oracle PL/SQL. My attempts have failed, with the image showing up as a red X (in Outlook 2007 and yahoo mail)

I've been sending html emails for some time, but my requirements are now to use several gif images in the email. I can store these on one of our web servers and just link to them, but many users email clients will not show them automatically and will need to either change settings or manually download them for each email.

So, my thoughts are to embed the image. My questions are:
1. What am I doing wrong here?
2. Is the embedding approach the correct one?
3. Any other options if I need to use more and more images? Attachments won't work, as the images are typically logos and icons that won't make sense out of the context of the message. Also, some elements of the email are links into an online system, so generating a static PDF and attaching won't work (to my knowledge anyway).
snippet:
```
MIME-Version: 1.0
To: [email protected]
BCC: [email protected]
From: [email protected]
Subject: Test
Reply-To: [email protected]
Content-Type: multipart/related; boundary="a1b2c3d4e3f2g1"

--a1b2c3d4e3f2g1

content-type: text/html;

    <html>
    <head><title>My title</title></head>
    <body>
    <div style="font-size:11pt;font-family:Calibri;">
    <p><IMG SRC="cid:my_logo" alt="Logo"></p>

... more html here ...

</div></body></html> 

--a1b2c3d4e3f2g1

Content-Type: image/gif;
Content-ID:<my_logo>
Content-Transfer-Encoding: base64
Content-Disposition: inline

[base64 image data here]

--a1b2c3d4e3f2g1--
```
Many thanks.

BTW: Yes, I have verified that the base64 data is correct, as I can embed the image in the html itself (using same algo use for creating header data) and see image in Firefox/IE.

I should also note that this is NOT for spam, the emails are sent to specific clients who are expecting it daily. The content is data-driven, and not adverts.
- JonLim almost 13 years
  
  Quick question: are you hosting these images off-site or embedding them directly into the email?
- tbone almost 13 years
  
  Part of my question really, I can do either. I'm try here to embed them, but not sucessfully. If I just link to them, many users won't see the images without downloading them first, which I'd like to avoid.
- JonLim almost 13 years
  
  A regular <img src="URL" /> worked for me, but it was an image that I hosted off-site. That doesn't work for you?
- tbone almost 13 years
  
  "works" is subjective...yes, it works if the user is willing to download the images each time, but I'd like to avoid that and embed the image.
- JonLim almost 13 years
  
  Just spent a bit of time looking at the embedded images from emails in my inbox, and I can't seem to crack it. Your code looks like it would work for an embed...
- tbone almost 13 years
  
  @JonLim: thanks for looking into it, see my comments in the answer for what I was missing.
- yehonatan yehezkel over 7 years
  
  if you want inline images that works also in gmail look at this answer visit stackoverflow.com/a/1607263/2613863
tbone almost 13 years

tried this first, it doesn't work for me for email. works fine for viewing in IE/Firefox, but not sent as email.
tbone almost 13 years

Perhaps u know a way (what would the content type be? text/html? the email headers I'd need to know to send a mixed html/image file this way)
Bernd almost 13 years

The code works for me when sending and receiving email via thunderbird. Just tested it, to be sure.
tbone almost 13 years

Thank you for posting the headers! It works! I believe I was missing the "name=" and "filename=" parts in the image section. Also, I changed to use png instead of gif.
Zesty about 12 years

Could any of you folks please tell us what Oracle package you used to send the email? Utl_mail.send does not have any parameter called "boundary". This information would be useful to other visitors to SO.
tbone about 12 years

@Zesty use @[username] to alert someone, just saw your question. I use utl_smtp. For me, I had to create build a clob with the html body, boundaries, etc and then send via utl_smtp. See here for simple example: oracle-base.com/articles/misc/EmailFromOraclePLSQL.php Note that this link does not show embedded images approach, but has detail to get you going.
Zesty about 12 years

@[tbone] Thanks for both pieces of information! This is just what I needed.
Michael Böckling over 9 years

Data URIs in emails aren't supported in many mainstream clients and should not be used, see: campaignmonitor.com/blog/post/3927/…
Makyen over 9 years

It would be helpful if you include an example.
jbruni about 9 years

Even more useful would be a reference to the spec.
hsb1007 about 9 years

It does not seem to work in hotmail / icloud =( did I miss anything
Peter Flynn over 8 years

Struggling on this one. I have coded exactly as above, but the image is not appearing (just a frame with the alt text; the text works fine). My Content-ID is <filename.jpg> so my href="cid:filename.jpg" -- is there some special trick to the value or syntax of Content-ID and cid: ?
Peter Flynn over 8 years

I checked with RFC2392 and the CID expression appears to be valid. But it still doesn't display.
guettli over 7 years

I wrote an answer to a similar question and created an ascii art to explain the structure: stackoverflow.com/a/40420648/633961
paper.plane over 7 years

I have used base64 encoding and I am sending the email to outlook. But outlook truncates my encoded data of the image, although everything else remains same as what was sent from the application. Because of this image is not appearing on the body of the email. Please help.
Kristjan Liiva almost 7 years

img2hmtl is the wackiest solution / idea I have seen in a while. +1
Mendy over 4 years

Pointed out by Michael Böckling: data URIs in emails aren't supported in many mainstream clients like gmail
Cesar over 3 years

This approach doesn't work as almost all the major email providers and web email clients block it.
Paschal about 3 years

Can you share a working example? What does the context.request stand for?
jpr almost 3 years

Thank you for the solution. Attaching the image and then referencing it in html code worked in my case.