0

Estoy trabajando en una Firma de Email con HTML TABLAS. El problema es el siguiente

Cuando inserto la firma en Mac Mail se inserta perfectamente, pero cuando envio el mensaje y luego lo abro con Outlook no se cargan las imagenes! Desde Outlook inspecciono desde el navegador la firma y en la etiqueta IMG no insertan el atributo "src" donde deberia ir el codigo de la imagen de base64.

Las imagenes estan codificadas en BASE64, funciona en todas las plataformas de Email.

Quiero aclarar que antes funcionaba correctamente cuando se enviaba un Email desde Mac Mail con la firma insertada y luego visualizaba el mensaje con Outlook. Pero ahora las imagenes no se cargan (No puedo dejar el codigo HTML-tabla por que supera de Caracteres ya que al pasar las imagenes por base64 genera mucho caracteres. Envio el archivo HTML que cntiene las imagenes en base64 por Google Drive Firma De Email, pero tambien dejo el codigo de la firma con las imagenes con la direccion local de mi computadora + captura de como no se cargan las imagenes).introducir la descripción de la imagen aquí

<html><body>

  <table style="background-color: #ffff; font-family: Calibri, Arial, Helvetica, Verdana; padding-top: 10px; padding-left: 8px; padding-bottom: 10px;" border="0" width="300" cellspacing="0" cellpadding="0">

  <tbody>

  <tr>



    <td style="padding-right: 15px; border-right: 1px solid #D0D0D0;" valign="middle">

      <a href="https://www.ferrosource.com/" target="_blank"><img src="img/logo.png" style="width: 95px; height: 132px;" ></a>

    </td>

  

  <td valign="middle" style="padding-left: 15px;"> 

    <span style="color: #003C71; display: block; border-bottom: 1px solid #DFDFDF; width: 295px;"><strong style="padding-bottom: 5px; font-size: 12px; font-weight: bolder; color: #1e1e1e; display: block;">Brian Caraway <span style="color: #AAAAAA; font-size: 17px; font-weight: 300;">|</span> <span style="color: #AAAAAA; font-size: 12px; font-weight: 500;">Sales Manager</span></strong></span>

      

    <span style="display: block; padding-top: 3px; color: #005194; font-size: 12px; font-weight: 700;">Ferrosource LLC</span>

    <table cellpadding="0" cellspacing="0" width="100%" border="0" style=" display: block; height: 13px; color:#000000;font-family:Arial,sans-serif;font-size:13px;line-height:5px;table-layout:fixed;width:100%;border:none;"><tr class="q " ><td align="left" class="u" style="padding:0;height:25px;word-wrap:break-word;vertical-align:middle;" width="8">
      <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="i fwm" align="left" width="100%"> <img alt width="33" height="auto" style="display:block;width: 12px;height:12px;" src="img/phone.png">
      </td></tr></table>
      </td><td class="tgtr" style="vertical-align:middle;color:transparent;font-size:0;" width="6">&#8203;
      </td><td align="left" class="u" style="padding:0;height:12px;word-wrap:break-word;vertical-align:middle;" width="auto">
      <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="x " align="left" width="100%"><p style="Margin:0;text-align:left;mso-ansi-font-size:28px;"><span style="font-size:11px;font-family:'Inter','Arial',sans-serif;font-weight:500;color:#1E1E1E;line-height:2px;mso-line-height-alt:32px;mso-ansi-font-size:28px;">713-412-7413</span></p>
      </td></tr></table>
      </td></tr></table>

      <table cellpadding="0" cellspacing="0" width="100%" border="0" style=" display: block; height: 17px; color:#000000;font-family:Arial,sans-serif;font-size:13px;line-height:5px;table-layout:fixed;width:100%;border:none;"><tr class="q " ><td align="left" class="u" style="padding:0;height:25px;word-wrap:break-word;vertical-align:middle;" width="8">
        <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="i fwm" align="left" width="100%"> <img alt width="14" height="4" style="display:block;width:12px;height:12px;" src="img/email.png">
        </td></tr></table>
        </td><td class="tgtr" style="vertical-align:middle;color:transparent;font-size:0;" width="6">&#8203;
        </td><td align="left" class="u" style="padding:0;height:32px;word-wrap:break-word;vertical-align:middle;" width="auto">
        <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="x " align="left" width="100%"><p style="Margin:0;text-align:left;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Inter','Arial',sans-serif;font-weight:500;color:#5C5C5C;line-height:2px;text-decoration:none;mso-line-height-alt:32px;mso-ansi-font-size:12px;"><a href="mailto:[email protected]" style="color:#1E1E1E;text-decoration:none;" target="_blank">[email protected]</a></span></p>
        </td></tr></table>
        </td></tr></table>

        <table cellpadding="0" cellspacing="0" width="100%" border="0" style=" display: block; height: 20px; color:#000000;font-family:Arial,sans-serif;font-size:13px;line-height:5px;table-layout:fixed;width:100%;border:none;"><tr class="q " ><td align="left" class="u" style="padding:0;height:25px;word-wrap:break-word;vertical-align:middle;" width="8">
          <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="i fwm" align="left" width="100%"> <img alt width="14" height="4" style="display:block;width:12px;height:12px;" src="img/website.png">
          </td></tr></table>
          </td><td class="tgtr" style="vertical-align:middle;color:transparent;font-size:0;" width="6">&#8203;
          </td><td align="left" class="u" style="padding:0;height:32px;word-wrap:break-word;vertical-align:middle;" width="auto">
          <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="x " align="left" width="100%"><p style="Margin:0;text-align:left;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Inter','Arial',sans-serif;font-weight:500;color:#5C5C5C;line-height:2px;text-decoration:none;mso-line-height-alt:32px;mso-ansi-font-size:12px;"><a href="https://www.ferrosource.com/" style="color:#1E1E1E;text-decoration:none;" target="_blank">www.ferrosource.com</a></span></p>
          </td></tr></table>
          </td></tr></table>

          <table cellpadding="0" cellspacing="0" width="100%" border="0" style=" display: block; height: 22px; color:#000000;font-family:Arial,sans-serif;font-size:13px;line-height:5px;table-layout:fixed;width:100%;border:none;"><tr class="q " ><td align="left" class="u" style="padding:0;height:25px;word-wrap:break-word;vertical-align:middle;" width="8">
            <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="i fwm" align="left" width="100%"> <img alt width="33" height="auto" style="display:block;width: 12px;height:12px;" src="img/location.png">
            </td></tr></table>
            </td><td class="tgtr" style="vertical-align:middle;color:transparent;font-size:0;" width="8">&#8203;
            </td><td align="left" class="u" style="padding:0;height:11px;word-wrap:break-word;vertical-align:middle;" width="auto">
            <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="x " align="left" width="100%"><p style="Margin:0;text-align:left;mso-ansi-font-size:28px;"><span style="font-size:11px;font-family:'Inter','Arial',sans-serif;font-weight:500;color:#1E1E1E;line-height:2px;mso-line-height-alt:32px;mso-ansi-font-size:28px;">27 Union Square West, Suite 300 New York, NY 10003</span></p>
            </td></tr></table>
            </td></tr></table>

    <a style="padding-right: 3px; padding-top: 5px; display: inline-block;" href="https://www.linkedin.com/company/ferrosource-llc" target="_blank"><img src="img/linkedin.png" style="width: 15px; height: 15px;"></a>

  
         <a style="padding-right: 3px;" href="https://twitter.com/ferrosource" target="_blank"><img src="img/twitter.png" style="width: 15px; height: 15px; display: inline-block;"></a> 

       
    <a style="padding-right: 3px;" href="https://www.instagram.com/ferrosource" target="_blank"><img src="img/instagram.png" style="width: 15px; height: 15px;"></a> 
    </td>
  </tr>
  </tbody>
  </table>
  </body></html>

2
  • Y poner las imágenes con url no te sirve??
    – OCHOA
    Commented el 23 abr. a las 12:12
  • No probe esto, pero conoces algun sitio para cargar imagenes y luego copiar la url? Commented el 23 abr. a las 15:49

1 respuesta 1

0

Cualquier sitio para subir imágenes te sirve para este propósito. Solo es de que las imágenes tenga larga vida. A mi me gusta https://es.imgbb.com/

Pero si tu proyecto tiene un servidor o una web propia, ahí mismo las puedes "hostear" y poner la url correspondiente.

Acá una muestra de como te puede quedar ya finalizada la firma con imágenes llamadas por url. Eso si, las imágenes deben ser del tamaño ideal para que la firma no sea pesada y no tarde en cargar.

<html><body>

  <table style="background-color: #ffff; font-family: Calibri, Arial, Helvetica, Verdana; padding-top: 10px; padding-left: 8px; padding-bottom: 10px;" border="0" width="300" cellspacing="0" cellpadding="0">

  <tbody>

  <tr>



    <td style="padding-right: 15px; border-right: 1px solid #D0D0D0;" valign="middle">

      <a href="https://www.ferrosource.com/" target="_blank"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ7HLel-SbxME_q8Ny3o0vTWBAj1bvnsT6jW9bJpSB3ug&s" style="width: 95px; height: 132px;" ></a>

    </td>

  

  <td valign="middle" style="padding-left: 15px;"> 

    <span style="color: #003C71; display: block; border-bottom: 1px solid #DFDFDF; width: 295px;"><strong style="padding-bottom: 5px; font-size: 12px; font-weight: bolder; color: #1e1e1e; display: block;">Brian Caraway <span style="color: #AAAAAA; font-size: 17px; font-weight: 300;">|</span> <span style="color: #AAAAAA; font-size: 12px; font-weight: 500;">Sales Manager</span></strong></span>

      

    <span style="display: block; padding-top: 3px; color: #005194; font-size: 12px; font-weight: 700;">Ferrosource LLC</span>

    <table cellpadding="0" cellspacing="0" width="100%" border="0" style=" display: block; height: 13px; color:#000000;font-family:Arial,sans-serif;font-size:13px;line-height:5px;table-layout:fixed;width:100%;border:none;"><tr class="q " ><td align="left" class="u" style="padding:0;height:25px;word-wrap:break-word;vertical-align:middle;" width="8">
      <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="i fwm" align="left" width="100%"> <img alt width="33" height="auto" style="display:block;width: 12px;height:12px;" src="https://cdn-icons-png.freepik.com/256/1/1257.png?semt=ais_hybrid">
      </td></tr></table>
      </td><td class="tgtr" style="vertical-align:middle;color:transparent;font-size:0;" width="6">&#8203;
      </td><td align="left" class="u" style="padding:0;height:12px;word-wrap:break-word;vertical-align:middle;" width="auto">
      <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="x " align="left" width="100%"><p style="Margin:0;text-align:left;mso-ansi-font-size:28px;"><span style="font-size:11px;font-family:'Inter','Arial',sans-serif;font-weight:500;color:#1E1E1E;line-height:2px;mso-line-height-alt:32px;mso-ansi-font-size:28px;">713-412-7413</span></p>
      </td></tr></table>
      </td></tr></table>

      <table cellpadding="0" cellspacing="0" width="100%" border="0" style=" display: block; height: 17px; color:#000000;font-family:Arial,sans-serif;font-size:13px;line-height:5px;table-layout:fixed;width:100%;border:none;"><tr class="q " ><td align="left" class="u" style="padding:0;height:25px;word-wrap:break-word;vertical-align:middle;" width="8">
        <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="i fwm" align="left" width="100%"> <img alt width="14" height="4" style="display:block;width:12px;height:12px;" src="img/email.png">
        </td></tr></table>
        </td><td class="tgtr" style="vertical-align:middle;color:transparent;font-size:0;" width="6">&#8203;
        </td><td align="left" class="u" style="padding:0;height:32px;word-wrap:break-word;vertical-align:middle;" width="auto">
        <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="x " align="left" width="100%"><p style="Margin:0;text-align:left;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Inter','Arial',sans-serif;font-weight:500;color:#5C5C5C;line-height:2px;text-decoration:none;mso-line-height-alt:32px;mso-ansi-font-size:12px;"><a href="mailto:[email protected]" style="color:#1E1E1E;text-decoration:none;" target="_blank">[email protected]</a></span></p>
        </td></tr></table>
        </td></tr></table>

        <table cellpadding="0" cellspacing="0" width="100%" border="0" style=" display: block; height: 20px; color:#000000;font-family:Arial,sans-serif;font-size:13px;line-height:5px;table-layout:fixed;width:100%;border:none;"><tr class="q " ><td align="left" class="u" style="padding:0;height:25px;word-wrap:break-word;vertical-align:middle;" width="8">
          <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="i fwm" align="left" width="100%"> <img alt width="14" height="4" style="display:block;width:12px;height:12px;" src="img/website.png">
          </td></tr></table>
          </td><td class="tgtr" style="vertical-align:middle;color:transparent;font-size:0;" width="6">&#8203;
          </td><td align="left" class="u" style="padding:0;height:32px;word-wrap:break-word;vertical-align:middle;" width="auto">
          <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="x " align="left" width="100%"><p style="Margin:0;text-align:left;mso-ansi-font-size:12px;"><span style="font-size:11px;font-family:'Inter','Arial',sans-serif;font-weight:500;color:#5C5C5C;line-height:2px;text-decoration:none;mso-line-height-alt:32px;mso-ansi-font-size:12px;"><a href="https://www.ferrosource.com/" style="color:#1E1E1E;text-decoration:none;" target="_blank">www.ferrosource.com</a></span></p>
          </td></tr></table>
          </td></tr></table>

          <table cellpadding="0" cellspacing="0" width="100%" border="0" style=" display: block; height: 22px; color:#000000;font-family:Arial,sans-serif;font-size:13px;line-height:5px;table-layout:fixed;width:100%;border:none;"><tr class="q " ><td align="left" class="u" style="padding:0;height:25px;word-wrap:break-word;vertical-align:middle;" width="8">
            <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="i fwm" align="left" width="100%"> <img alt width="33" height="auto" style="display:block;width: 12px;height:12px;" src="img/location.png">
            </td></tr></table>
            </td><td class="tgtr" style="vertical-align:middle;color:transparent;font-size:0;" width="8">&#8203;
            </td><td align="left" class="u" style="padding:0;height:11px;word-wrap:break-word;vertical-align:middle;" width="auto">
            <table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td class="x " align="left" width="100%"><p style="Margin:0;text-align:left;mso-ansi-font-size:28px;"><span style="font-size:11px;font-family:'Inter','Arial',sans-serif;font-weight:500;color:#1E1E1E;line-height:2px;mso-line-height-alt:32px;mso-ansi-font-size:28px;">27 Union Square West, Suite 300 New York, NY 10003</span></p>
            </td></tr></table>
            </td></tr></table>

    <a style="padding-right: 3px; padding-top: 5px; display: inline-block;" href="https://www.linkedin.com/company/ferrosource-llc" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/LinkedIn_icon.svg/1024px-LinkedIn_icon.svg.png" style="width: 15px; height: 15px;"></a>

  
         <a style="padding-right: 3px;" href="https://twitter.com/ferrosource" target="_blank"><img src="img/twitter.png" style="width: 15px; height: 15px; display: inline-block;"></a> 

       
    <a style="padding-right: 3px;" href="https://www.instagram.com/ferrosource" target="_blank"><img src="img/instagram.png" style="width: 15px; height: 15px;"></a> 
    </td>
  </tr>
  </tbody>
  </table>
  </body></html>

Usé una imagen como logo, un icono para el teléfono y un icono de RRSS. Lo aclaro para que no se piense que las otras imágenes no cargan bien.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.