如何在HTML电子邮件正文中嵌入图像

时间:2014-12-22 14:18:04

标签: image email html-email

我正在尝试发送系统生成的电子邮件,我在电子邮件正文中包含了一个图像。当使用以下HTML发送消息时,我收到的是“红色X”而不是图像:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>Test Mailing</title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      </head>
      <body><p>
    Text right before the HP image.</p>
<p>
    <img alt="Harry Potter" src="data:image/jpeg;base64, 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"/>
</p>
<p>
    Text right after the image.</p>
<p>
    &nbsp;</p>
</body></html>

使用上面的HTML,我在我的电子邮件中获得以下内容:

HP图像之前的文本。

哈利波特

图像后面的文字。

当我检查我的gMail内容时,我会显示以下内容:

<div><p>
    Text right before the HP image.</p>
<p>
    <img alt="Harry Potter">
</p>
<p>
    Text right after the image.</p>
<p>
    &nbsp;</p>
</div>

似乎保留了“alt”,但“src”似乎以某种方式被删除了。

作为测试,我尝试发送一个从服务器检索图像的电子邮件。以下代码生成预期结果,但它是链接的,而不是嵌入的图像。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>Test Mailing</title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      </head>
      <body><p>
    Text right before the Oracle image.</p>
<p>
    <img src="http://oracle-base.com/images/site_logo.gif" /></p>
<p>
    Text right after the image.</p>

<p>
    &nbsp;</p>
</body></html>

我假设我的问题在于IMG标签,但IMG似乎遵循我在网上看到的关于嵌入图像的例子。

感谢您查看此内容。

2 个答案:

答案 0 :(得分:1)

问题在于您在base64编码中插入的空格:

src="data:image/jpeg;base64, /9j/4AAQS...

应该是:

src="data:image/jpeg;base64,/9j/4AAQS...

然后它有效。

答案 1 :(得分:0)

我建议添加隐藏的附件,然后在HTML标记中引用嵌入的图像。有关详细信息,请参阅vba email embed image not showing