0

I have a requirement where i have to embed an image in a mail and when the user would click over the image it would redirect him to the new site. I seriously have no idea as to what should i provide in the image src. Is it possible only through html. Require guidance. Thanks.

This is my trial HTML

<html>
<head>
</head>
<title>trial</title>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table width="900" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><a href="siteAddr">
<img style="float:left;" src="myImage.jpg" width="900" height="356" alt="my image" border="0" /></a></td>
    </tr>

</table>
</center>
</body>
</html>
j08691
  • 204,283
  • 31
  • 260
  • 272
sTg
  • 4,313
  • 16
  • 68
  • 115
  • https://sendgrid.com/blog/embedding-images-emails-facts/ http://stackoverflow.com/questions/16242489/send-a-base64-image-in-html-email – Mike Apr 22 '15 at 17:39
  • 1
    Is putting the image on the web an option and link to the URL? You really ought to put alternate text on that image; some email clients will strip attachments and/or block images. In these cases, there's nothing you can do. – Tim Apr 22 '15 at 17:47

2 Answers2

2

INLINE EMBEDDING (Base64 Encoding)

Inline embedding is much more simple, mostly because you don’t have to completely roll your own emails and dig around in MIME to use it.

Embedding an image in an email first requires that you have a version of said image as a base64 encoded string. There are lots of web based tools to do this, such as ImageToBase64Converter by Web Coder Tools.

Once your image is encoded, jump into your template, or whatever HTML you’re sending out, and embed it using a standard HTML image tag:

<img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgACAESAAMAENkDZ5u8/61a+X...more encoding" />

Then you’re done! Send away.

Pros

Much simpler to achieve Much faster to do Requires much less deep dive into MIME and application code

Cons

Can really increase size of emails especially if you use more than one image Most likely blocked by default in many webmail services Blocked completely in Outlook

REFERENCES: "Sendgrid Blog - Embedding Images"

EXTERNAL REFERENCE LINK

link the image from another site.

<img src="http://this-is-a-url.com/this-is-an-image.jpg" />
Mike
  • 874
  • 1
  • 8
  • 15
  • Please cite your sources within your answer and include the appropriate quote formatting - posting a comment on the question with a link is not enough. See http://stackoverflow.com/help/referencing – BoltClock Apr 22 '15 at 17:47
  • reference has been added, feel free to edit it to fit the appropriate "formatting" as I can't be bothered. – Mike Apr 22 '15 at 17:56
0

Replace the img src with an absolute url and you're done - if the reader is connected to the internet when reading, otherwise your pic will not be loaded.

The Conspiracy
  • 3,495
  • 1
  • 17
  • 18