图片链接不适用于电子邮件

时间:2016-02-03 05:50:43

标签: html css

我有一个工作页面可以在浏览器中查看。这个页面来自原始文件(psd)并转换为html。但是当通过电子邮件发送时,图像链接无法正常工作......你如何解决这个问题?

 <html>
 <head>
  <title>Eblast-WAE-Preorder</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
  <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="width: 700px; margin: auto;">
   <!-- Save for Web Slices (Eblast-WAE-Preorder.psd) -->
   <table id="Table_01" width="700" height="1151" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="14">
        <a href="http://i.com/" target="_blank"><img src="images/Eblast-WAE-Preorder_01.jpg" width="700" height="680" alt=""></a></td>
 </tr>
 <tr>
    <td colspan="14">
        <img src="images/Eblast-WAE-Preorder_02.jpg" width="700" height="12" alt=""></td>
 </tr>
 <tr>
    <td rowspan="2">
        <img src="images/Eblast-WAE-Preorder_03.jpg" width="51" height="123" alt=""></td>
    <td colspan="11">
        <a href="https://docs.google.com/d/1kSIyCanxKq-cI1xjJ4WgbKAkaESljmGDmKXnX0XFN9w/viewform"  target="_blank"><img src="images/Eblast-WAE-Preorder_04.jpg" width="598" height="38" alt=""></a></td>
    <td colspan="2" rowspan="2">
        <img src="images/Eblast-WAE-Preorder_05.jpg" width="51" height="123" alt=""></td>
 </tr>
 <tr>
    <td colspan="11">
        <img src="images/Eblast-WAE-Preorder_06.jpg" width="598" height="85" alt=""></td>
 </tr>
 <tr>
    <td colspan="14">
        <a href="http://i.com/wp-content/uploads/2016/02/Pre-Order-Ticket-Info.pdf" target="_blank"><img src="images/Eblast-WAE-Preorder_07.jpg" width="700" height="271" alt=""></a></td>
</tr>
<tr>
    <td colspan="14">
        <a href="http://i.com" target="_blank"><img src="images/Eblast-WAE-Preorder_08.jpg" width="700" height="15" alt=""></a></td>
</tr>
<tr>
    <td colspan="2" rowspan="2">
        <a href="http://i.com/" target="_blank"><img src="images/Eblast-WAE-Preorder_09.jpg" width="456" height="49" alt=""></a></td>
    <td rowspan="2">
        <a href="https://i.com" target="_blank"><img src="images/Eblast-WAE-Preorder_10.jpg" width="26" height="49" alt=""></a></td>
    <td>
        <a href="https://www.youtube.com/channel/UCdp" target="_blank"><img src="images/Eblast-WAE-Preorder_11.jpg" width="34" height="35" alt=""></a></td>
    <td rowspan="2">
        <img src="images/Eblast-WAE-Preorder_12.jpg" width="6" height="49" alt=""></td>
    <td>
        <a href="https://www.facebook.com/i.school" target="_blank"><img src="images/Eblast-WAE-Preorder_13.jpg" width="34" height="35" alt=""></a></td>
    <td rowspan="2">
        <img src="images/Eblast-WAE-Preorder_14.jpg" width="8" height="49" alt=""></td>
    <td>
        <a href="https://www.pinterest.com/i/" target="_blank"><img src="images/Eblast-WAE-Preorder_15.jpg" width="34" height="35" alt=""></a></td>
    <td rowspan="2">
        <img src="images/Eblast-WAE-Preorder_16.jpg" width="7" height="49" alt=""></td>
    <td>
        <a href="https://twitter.com/I" target="_blank"><img src="images/Eblast-WAE-Preorder_17.jpg" width="33" height="35" alt=""></a></td>
    <td rowspan="2">
        <img src="images/Eblast-WAE-Preorder_18.jpg" width="7" height="49" alt=""></td>
    <td colspan="2">
        <a href="https://www.linkedin.com/in/is-6a235aa9" target="_blank"><img src="images/Eblast-WAE-Preorder_19.jpg" width="34" height="35" alt=""></a></td>
    <td rowspan="2">
        <img src="images/Eblast-WAE-Preorder_20.jpg" width="21" height="49"   alt=""></td>
   </tr>
    <tr>
    <td>
        <img src="images/Eblast-WAE-Preorder_21.jpg" width="34" height="14" alt=""></td>
    <td>
        <img src="images/Eblast-WAE-Preorder_22.jpg" width="34" height="14" alt=""></td>
    <td>
        <img src="images/Eblast-WAE-Preorder_23.jpg" width="34" height="14" alt=""></td>
    <td>
        <img src="images/Eblast-WAE-Preorder_24.jpg" width="33" height="14" alt=""></td>
    <td colspan="2">
        <img src="images/Eblast-WAE-Preorder_25.jpg" width="34" height="14" alt=""></td>
   </tr>
   <tr>
    <td>
        <img src="images/spacer.gif" width="51" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="405" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="26" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="34" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="6" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="34" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="8" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="34" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="33" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="7" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="4" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="30" height="1" alt=""></td>
    <td>
        <img src="images/spacer.gif" width="21" height="1" alt=""></td>
   </tr>
   </table>
   <!-- End Save for Web Slices -->
   </body>
   </html>

然后这是文件夹

  images
    index.html

4 个答案:

答案 0 :(得分:1)

图片需要托管在服务器上,并在电子邮件html中完全引用。

例如:http://your-domain-name/images/Eblast-WAE-Preorder_08.jpg

答案 1 :(得分:1)

这是在您的网站上工作,因为自动采取邮件中的根路径而不是根路径

<img src="images/Eblast-WAE-Preorder_03.jpg" width="51" height="123" alt="">

像这样使用

<img src="http://website.com/images/Eblast-WAE-Preorder_03.jpg" width="51" height="123" alt="">

答案 2 :(得分:1)

您的代码中有两件事

  1. 请给你img标签绝对路径。就像这样http://www.zymz.com/rohit.jpg
  2. 是你的标签是内联的,它就像这样定义为内联块
  3. <a style="display:inline-block;vertical-align:top;" href="xyz.xcom"></a>

答案 3 :(得分:0)

如果没有在线托管意味着只需将图片上传到Google云端硬盘并将其文件权限公开,并复制文件夹ID,如OLKJGUIUIV5324654eswrw。现在使用此http://googledrive.com/host/OLKJGUIUIV5324654eswrw/imagename.png并发送您的电子邮件