单击“通过邮件发送”按钮时如何在邮件正文中嵌入图像

Question

I have a list of social sharing buttons on HTML. Clicking each of them allows to send an image (see the codepen sample). I would like to know if there's a way to attach the same image on the "Sending by mail" button, at the mail body.

Thanks

codepen sample

 .FCBK, .TWITTER, .GPLUS, .MAIL { position: absolute; display:block; top:0; right:0; margin-top:5px; text-indent:-9999px; width:50px; height:50px; background-repeat:no-repeat; cursor: pointer; } .FCBK { background-image: url(http://www.myrtlebeachgolf.com/assets/images/facebook-icon.png); margin-right: 203px; } .TWITTER { background-image: url(http://www.myrtlebeachgolf.com/assets/images/twitter-icon.png); margin-right:141px; } .GPLUS { background-image: url(http://www.myrtlebeachgolf.com/assets/images/google-plus-icon.png); margin-right:79px; } .MAIL { background-image: url(http://www.myrtlebeachgolf.com/assets/images/email-icon.png); margin-right:17px; } 

 <div class="SOCIAL"> <a class="FCBK" rel="img_src" href="" onclick="popUp=window.open( 'https://www.facebook.com/sharer.php?u=http://www.designboom.com/contest/files/copy_0_brain1.jpg', 'popupwindow', 'scrollbars=yes,width=800,height=400'); popUp.focus(); return false" title="Share on Facebook"> <!--<i class="visuallyhidden">share on facebook</i>--> </a> <a class="TWITTER" rel="nofollow" href="https://twitter.com/" onclick="popUp=window.open( 'https://twitter.com/intent/tweet?text=pic.twitter.com/HntZUf55tt', 'popupwindow', 'scrollbars=yes,width=800,height=400'); popUp.focus(); return false" title="Share on Twitter"> <!-- <i class="visuallyhidden">share on twitter</i>--> </a> <a class="GPLUS" rel="nofollow" href="https://www.plus.google.com/" onclick="popUp=window.open( 'https://plus.google.com/share?url=http://www.designboom.com/contest/files/copy_0_brain1.jpg', 'popupwindow', 'scrollbars=yes,width=800,height=400'); popUp.focus(); return false" title="Share on Google+"> <!--<i class="visuallyhidden">share on google plus</i>--> </a> <a class="MAIL" rel="nofollow" href="mailto:?subject=I like this &body=http://www.designboom.com/contest/files/copy_0_brain1.jpg" title="Send by mail"> <!--<i class="visuallyhidden">share via email</i>--> </a> </div> 

Answer 1

As far I know the only way to achieve this is by using Base64 encoded images. See this answer:

Sending mail from HTML page with image in the body

Please keep in mind that you cannot use spaces as character. Email content have to be entity encoded. Otherwise some characters will break your code. Just use %20 instead of space. For further experiments with encoding you could try This online encoder