Embedding attached images in HTML emails

Question

If I attach an image to an email, how can I place it in the HTML content? I tried just using the filename as the image source but that doesn't seem to work.

Answer 1

Be more specific on how you build the HTML mail message.

The result will be a multipart-MIME message with a text/html part (if you really do it right with an alternate part of type text/plain) and several images, which are then referenced from within the HTML.

See RFC 1813 and RFC 2378 for more information about content-id in mixed MIME and related data (referred by CID in the HTML source).

Answer 2

The image attachment section needs Content-ID

--T4nu9J8b
Content-Type: image/png
Content-ID: <idname>
Content-Transfer-Encoding: base64
Content-Disposition: attachment ;filename="testimage.png"

iVBORw0KGgoAAAANS...
--T4nu9J8b--

Note: Content-ID name should be put in an angular bracket, as given

Embed it into the tag using same Content-ID (without the angular bracket)

<img alt="Embedded Image" src="cid:idname"/>

This should allow the attached image to be displayed into the HTML!

Answer 3

Option 01:
- attach the file "mySignaturePictue.jpg" as attachment to the mail
- reference this attachment from the body (insert it) whith code like:
<img src="cid:mySignaturePicture.png">

Option 02:
- convert your image to a base64 string: http://www.motobit.com/util/base64-decoder-encoder.asp
- insert it to the mailtext/html-body with code like
<img alt="My Image" src="data:image/jpeg;base64,AWWhcalkjsd/beginning/RXhp/of+/long/base64cod/ZgAATU0/+BlaBlubbZ5u8/61a+Xand/much/more..." />
- Downside: this is blocked by most clients and will increase the mail size, see: https://www.campaignmonitor.com/blog/email-marketing/2013/02/embedded-images-in-html-email/ and https://www.paperstreet.com/blog/email-marketing-embeded-images-cid-what-a-mess/

Answer 4

You can use the same way with src="cid:bgBoletin" property of img tag.

Answer 5

The answer to your question is in the spring docs here.

 mailSender.send(new MimeMessagePreparator() {
   public void prepare(MimeMessage mimeMessage) throws MessagingException {
     MimeMessageHelper message = new MimeMessageHelper(mimeMessage, true, "UTF-8");
     message.setFrom("me@mail.com");
     message.setTo("you@mail.com");
     message.setSubject("my subject");
     message.setText("my text <img src='cid:myLogo'>", true);
     message.addInline("myLogo", new ClassPathResource("img/mylogo.gif"));
   }
 });

The body of the message is one of the parts of the multipart message (note the second parameter set to true on the constructor of MimeMessageHelper that sets the message to a multipart message).

The line message.addInline("myLogo"... adds the image as another part of the multipart message.

You can use .setText to set the body (HTML content) of the email message.

You can refer to other parts of the multipart email (your image) by using the tag cid. Note how the img src attribute is src='cid:myLogo'. cid is the content id of the image, sent as one of the parts of the multipart message.

Answer 6

I'm doing it in this way

_mime = new MimeMultipart();
BodyPart messageBodyPart = new MimeBodyPart();
messageBodyPart = new MimeBodyPart();
DataSource fds = new FileDataSource("C:\\bgBoletin.jpg");

messageBodyPart.setDataHandler(new DataHandler(fds));
messageBodyPart.setHeader("Content-ID", "<bgBoletin>");
_mime.addBodyPart(messageBodyPart);

And in HTM file whe reference de Content-ID in this way background: url(cid:bgBoletin).

Answer 7

If this has to do with sending emails from a website you are developing, just keep the images on your server and then link to them using the <img src="url"/>.