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

Question

我有一个 HTML 上的社交分享按钮列表。单击它们中的每一个都可以发送图像（请参阅 codepen 示例）。我想知道是否有办法在邮件正文的“通过邮件发送”按钮上附加相同的图像。

谢谢

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

据我所知，实现此目的的唯一方法是使用 Base64 编码图像。看到这个答案：

Sending mail from HTML page with image in the body

请记住，您不能使用空格作为字符。电子邮件内容必须是实体编码的。否则某些字符会破坏您的代码。只需使用%20 而不是空格。如需进一步的编码实验，您可以尝试This online encoder