Adding image in the body of the email using href - html

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?

Answer 1

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 ;

Answer 2

Add that image inside <a> tag.
<a href="mailto:?subject=Testing">
<img src="your image path">
</a>
Hope it will help.

Answer 3

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>