Adding image in the body of the email using href

Question

I have a link in my page that once click it will open the email client. My code is below:

  <a href="mailto:?subject=Testing&body=AttachImage">

My question is how can I add an image in the body of the email. I tried image src but it does not work. Any suggestions?

Possible duplicate of [Sending mail from HTML page with image in the body](http://stackoverflow.com/questions/26373737/sending-mail-from-html-page-with-image-in-the-body) — eltonkamami, Jul 20 '16 at 07:32
As mentioned here http://stackoverflow.com/questions/5620324/mailto-with-html-body/13415988#13415988 , its not possible at all. — Irannabi, Jul 20 '16 at 07:35

Eric · Answer 1 · 2016-07-20T07:53:47.347

Suppose you have your image defined like :

<img id="myimage" src="http://www.myserver.com/images/myimage"></img>

And its equivalent base64 encoded here that you would like to send by mail :

<img id="b64" src=""></img>

You can use base64 encoded form, such as :

function getBase64Image() {
    //return LOGO;
  var dataURL = '';
  try {
    var img = document.getElementById('myimage');
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to guess the
    // original format, but be aware the using "image/jpg" will re-encode the image.
    dataURL = canvas.toDataURL("image/jpg");
  }
  catch(e) {
    console.log('Could not retrieve Base64 image with userAgent : ' + navigator.userAgent + ' \nException : ' + e);
  }
  return dataURL;

}

var base64Image = getBase64Image();

And then set your img src :

document["b64"].src = base64Image ;

But this doesn't really answer the real question the OP is asking here, does it? The problem we have I guess is to render the image on the email body of the email client not on a DOM element. The explanation on this thread could be helpful though - https://stackoverflow.com/questions/26373737/sending-mail-from-html-page-with-image-in-the-body — kabirbaidhya, Apr 26 '18 at 19:19

score -3 · Answer 2 · answered Jul 20 '16 at 07:34

-3

Add that image inside <a> tag.

<a href="mailto:?subject=Testing">
    <img src="your image path">
 </a>

Hope it will help.

answered Jul 20 '16 at 07:34

Pirate

2,886
4
24
42

score -4 · Answer 3 · answered Jul 20 '16 at 07:36

-4

It's working, you might have not defined img width and height.

img{
  width:100px;
  height:100px;
}

 <a href="mailto:?subject=Testing&body=AttachImage">
<img src = "https://source.unsplash.com/random">
</a>

answered Jul 20 '16 at 07:36

frnt

8,455
2
22
25

Adding image in the body of the email using href

3 Answers3