【问题标题】:<img> tags not working properly in HTML email<img> 标签在 HTML 电子邮件中无法正常工作
【发布时间】:2016-06-23 08:00:43
【问题描述】:

我一直在使用 Python 发送 HTML 电子邮件通讯。 Python 部分似乎工作正常,我认为问题在于阅读 HTML 的电子邮件。这是我正在使用的模板的 HTML:

<!DOCTYPE html>
<html>
 <head>
  <title>Title</title>
 </head>
 <body>
  <table>
   <tr>
    <td>
     <table align="center" bgcolor="#000000" style="padding-bottom:20px" width="100%">
      <tr>
       <td align="center" style="Font-family: Arial, Helvetica, sans-serif"><img style="padding-top:20px; padding-bottom:20px" src="http://domain.com/logo.png" alt="logo" width="30%" /><table align="center" bgcolor="#ffffff" width="80%" style="padding-left:10px; padding-right:10px; padding-top:10px; padding-bottom:10px">
      <tr>
       <td align="left"><font color="#646466">Text<br><br><i>Text</i><br></font><h3><font color="#000000">Header</font></h3>
     <table>
      <tr>
       <td style="padding-bottom:10px"><img src="http://domain.com/link.png" alt="image" height="54" width="108" style="padding-right:10px" /></td>
       <td height="54" valign="top"><p style="margin:0px 0 0; padding-bottom:3px"><font color="#646466"><b>Text</b></font></p><font color="#646466" size="2">Text</font></td></tr><tr><td style="padding-bottom:10px"><img src="http://domain.com/link.png" alt="image" height="54" width="108" style="padding-right:10px" /></td><td height="54" valign="top"><p style="margin:0px 0 0; padding-bottom:3px"><font color="#646466"><b>Text</b></font></p><font color="#646466" size="2">Text</font></td>
      </tr>
      <tr>
       <td style="padding-bottom:10px"><img src="http://domain.com/link.png" alt="image" height="54" width="108" style="padding-right:10px" /></td>
       <td height="54" valign="top"><p style="margin:0px 0 0; padding-bottom:3px"><font color="#646466"><b>Text</b></font></p><font color="#646466" size="2">Text</font></td>
      </tr>
     </table>
     <font color="#646466" size="2"><b>Text:</b> <i>text</i></font><h3><font color="#000000">Header</font></h3>
     <table>
      <tr> 
       <td style="padding-bottom:10px"><img src="http://domain.com/link.png" alt="image" height="54" width="108" style="padding-right:10px" /></td>
       <td height="54" valign="top"><p style="margin:0px 0 0; padding-bottom:3px"><font color="#646466"><b>Text</b></font></p><font color="#646466" size="2">Text</font></td>
      </tr>
      <tr>
       <td style="padding-bottom:10px"><img src="http://domain.com/link.png" alt="image" height="54" width="108" style="padding-right:10px" /></td>
       <td height="54" valign="top"><p style="margin:0px 0 0; padding-bottom:3px"><font color="#646466"><b>Text</b></font></p><font color="#646466" size="2">Text</font></td>
      </tr>
      <tr>
       <td style="padding-bottom:10px"><img src="http://domain.com/link.png" alt="image" height="54" width="108" style="padding-right:10px" /></td>
       <td height="54" valign="top"><p style="margin:0px 0 0; padding-bottom:3px"><font color="#646466"><b>Text</b></font></p><font color="#646466" size="2">Text</font></td>
      </tr>
     </table>
     <font color="#646466" size="2"><b>Text:</b> <i>Text</i></font><br><br><font color="#646466">Text<br><br>Text</font><br><br><font color="#646466" size="2"><i>Text.</i></font>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</td>
</tr>
</table>
</body>
</html>

当我将源代码保存为 .html 文件并在 Safari 中打开它时,一切都按原样显示,并且图像正常工作。但是,当我使用脚本并在 Gmail 中打开时,一些图像已关闭(本例中只是第一个标题的第一张和第三张图像),我不知道为什么,因为所有的代码都是相同的他们。我想知道我是否使用了错误的标签或可能无法正确呈现电子邮件的东西。这是我唯一能想到的。在 Gmail 中,当我检查图像时,非工作图像的链接也会关闭。工作的发送为http://domain.com/link.png 并显示为相同。非工作的以http://domain.com/link.png 发送并显示为http://domain.com/l+ink.png(字符串中错误地随机出现'+')。如果有人是 HTML 方面的专家,我将不胜感激。

【问题讨论】:

  • 格式化代码,否则别人不会帮你的。
  • width="30%" 很遗憾不是有效的 HTML。 width 属性已经以像素为单位,需要为其分配一个整数值。例如width="420" 表示图像的宽度为 420 像素。此外,最好确保您的图像也分配有height 属性,如果您不指定它,一些较旧的邮件客户端将默认读取height="0"
  • 感谢@San 的编辑。实际上我现在只是进去修复它! :)
  • 无论如何,@Abdul Fatir 现在已经格式化了。
  • 和@Frits,我尝试将徽标宽度更改为像素而不是百分比,但无济于事。 (顺便说一句,标志图像从来都不是一个挣扎的图像。它只是身体图像)

标签: python html email tags


【解决方案1】:

解决了问题:显然 HTML 中的新行对于电子邮件很重要。没有新行的未格式化代码在浏览器中运行良好,但有时会因任何原因破坏电子邮件中的图像。添加新行解决了这个问题。

【讨论】:

    猜你喜欢
    • 2022-08-03
    • 1970-01-01
    • 1970-01-01
    • 2018-12-25
    • 2011-09-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-03
    相关资源
    最近更新 更多