Problemas con las imágenes en mi newsletter

  • Autor Autor member
  • Fecha de inicio Fecha de inicio
M

member

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Me he bajado gratuitamente un theme de mail newsletter. La verdad no sé casi nada de HMTL 5 y por ello pregunto. Puedo editar el theme sin problemas pero las imágenes no me aparecen cuando copio el código en mi email. Incluso, envié un email de prueba subiendo las imágenes pero, esta no aparecieron.
 
url compañero para ver que pasa y poderte orientar mejor.
 
Es que no tengo link. Tengo una cuenta en crea Creative Market y recibí un email ayer donde podía bajar gratuitamente varios paquetes, incluyendo este: https://creativemarket.com/weselldesign/14205-SimpleMail-Email-Newsletter

Quiero usar eso para el envío de mi newsletter pero, las imágenes de las redes sociales no me salen cuando envío el email, no sé si tengo que cambiar las rutas o qué. También me gustaría saber como hacer que los links funcionen.


Tengo un archivo HTML con el siguiente código:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleMail - Layout 8</title>
<style type="text/css">
<!--
.style1 {color: #8f8f8f}
-->
</style>
</head>

<body style="font-family:Arial, Helvetica, sans-serif; background:#f5f5f5; line-height:24px;">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
    <td><img src="img/header.png" width="600" height="200" /></td>
  </tr>
  <tr>
    <td height="50" bgcolor="#ececec"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="300" style="font-size:30px; font-weight:bold; color:#8f8f8f; padding-left:20px">SimpleMail <span style="color:#34495e; font-size:18px;">october 2013</span></td>
        <td width="300" align="right"><a href="#" style="color:#8f8f8f; font-size:12px; margin-right:20px; text-decoration:none">View in browser</a></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td bgcolor="#e0e0e0" style="padding:20px; font-size:16px; color:#8f8f8f" align="center">Lorem ipsum dolor sit amet, quem doctus tamquam vix cu. Sit at magna ludus delenit, quo ut congue minimum atomorum. Nonumy comprehensam sea ea, ne sumo utroque tincidunt sea. An vidit deserunt mediocritatem eam ...<br /><br /></td>
  </tr>
  <tr>
    <td bgcolor="#e0e0e0" align="center"><a href="#" style="padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px; font-size:24px; font-weight:bold; color:#fff; background:#34495e; text-decoration:none;">CALL TO ACTION</a></td>
  </tr>
  <tr>
    <td height="30" bgcolor="#e0e0e0">&nbsp;</td>
  </tr>
  <tr>
    <td height="40">&nbsp;</td>
  </tr>
  <tr>
    <td><table width="520" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="3" style="font-size:24px; font-weight:bold; color:#5b5b5b;">ARTICLE TITLE 1</td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr>
        <td width="146" rowspan="4" valign="top"><img src="img/146.png" width="146" height="146" /></td>
        <td width="40">&nbsp;</td>
        <td style="color:#8f8f8f; font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis eu risus eget bibendum. Fusce odio lorem, cursus ac turpis sed...</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td><a href="#" style="text-decoration:none; color:#fff; background:#34495e; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px;">Read more</a></td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" valign="top" style="border-bottom:solid 1px #34495e">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="520" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="3" style="font-size:24px; font-weight:bold; color:#5b5b5b;">ARTICLE TITLE 2</td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr>
        <td width="146" rowspan="4" valign="top"><img src="img/146.png" width="146" height="146" /></td>
        <td width="40">&nbsp;</td>
        <td style="color:#8f8f8f; font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis eu risus eget bibendum. Fusce odio lorem, cursus ac turpis sed...</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td><a href="#" style="text-decoration:none; color:#fff; background:#34495e; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px;">Read more</a></td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" valign="top" style="border-bottom:solid 1px #34495e">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="520" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="3" style="font-size:24px; font-weight:bold; color:#5b5b5b;">ARTICLE TITLE 3</td>
      </tr>
      <tr>
        <td colspan="3">&nbsp;</td>
      </tr>
      <tr>
        <td width="146" rowspan="4" valign="top"><img src="img/146.png" width="146" height="146" /></td>
        <td width="40">&nbsp;</td>
        <td style="color:#8f8f8f; font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam convallis eu risus eget bibendum. Fusce odio lorem, cursus ac turpis sed...</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td><a href="#" style="text-decoration:none; color:#fff; background:#34495e; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px;">Read more</a></td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td valign="top">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td colspan="3" valign="top" style="border-bottom:solid 1px #34495e">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="520" border="0" align="center" cellpadding="0" cellspacing="0">

      <tr>
        <td width="146"><img src="img/146.png" width="146" height="146" /></td>
        <td>&nbsp;</td>
        <td width="146"><img src="img/146.png" alt="" width="146" height="146" /></td>
        <td>&nbsp;</td>
        <td width="146"><img src="img/146.png" alt="" width="146" height="146" /></td>
      </tr>
      <tr>
        <td height="40">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><img src="img/146.png" alt="" width="146" height="146" /></td>
        <td>&nbsp;</td>
        <td><img src="img/146.png" alt="" width="146" height="146" /></td>
        <td>&nbsp;</td>
        <td><img src="img/146.png" alt="" width="146" height="146" /></td>
      </tr>

      <tr>
        <td colspan="5" style="border-bottom:solid 1px #34495e">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#34495e">
      <tr>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td width="240" style="color: #ffffff; font-weight: bold; font-size: 18px;">We are social</td>
        <td width="40">&nbsp;</td>
        <td width="240" style="color: #ffffff; font-weight: bold; font-size: 18px;">SimpleMail Newsletter</td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td width="240"><img src="img/twitter.png" width="32" height="32"/><img src="img/facebook.png" width="32" height="32" style="padding-left:5px"/><img src="img/googleplus.png" width="32" height="32" style="padding-left:5px" /><img src="img/pinterest.png" width="32" height="32" style="padding-left:5px" /><img src="img/dribbble.png" width="32" height="32" style="padding-left:5px" /></td>
        <td width="40">&nbsp;</td>
        <td width="240" style="color:#fff;">123 Inboxa Street, 2267<br /> London, UK</td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td width="240" style="color: #FFFFFF">You are receiving this email because you are subscribed to <strong>SimpleMail newsletter</strong></td>
        <td width="40">&nbsp;</td>
        <td width="240"><a href="#" style="color:#fff">www.yourcompanyname.com</a></td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td width="240" style="color:#fff">Don’t want to receive this newsletter? <a href="#" style="color:#fff">Unsubscribe here</a></td>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
        <td width="240">&nbsp;</td>
        <td width="40">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>

Saludos, gracias por tu tiempo.

- - - Actualizado - - -

Ya lo he resolvido, gracias.

Saludos.
 
El problema es que las rutas de las imágenes son relativas (Por ej: "img/foto1.jpg") y así obviamente no te van a cargar cuando realices el envío del email.

Lo primero que tienes que hacer es tener un espacio donde almacenar las imágenes (hosting, flickr, pinterest, etc) algo que te permita tener la imagen online y poder copiar la URL de la imagen.

Teniendo esa URL de la imagen ya hosteada, sólo inserta esa URL en donde debería ir cada imagen.
Por ej si tenías:
<img src="img/146.png" width="146" height="146" />

Debería quedarte algo así:
<img src="http://www.servidordondeestalaimagen.com/img/146.png" width="146" height="146" />

Con eso ya las imágenes cargarán cuando hagas el envío del email.
🙂
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

Darkfrost
🚀 Fix No Oficial para Plugin WooCommerce Dropi - Solución a Problemas de Imágenes
Respuestas
3
Visitas
60
master1986
master1986
Nikkygeek
Problemas al visualizar imágenes después de cambiar el tema
Respuestas
3
Visitas
125
Nikkygeek
Nikkygeek
I
Problema al agregar imágenes en Editor Clásico WP
Respuestas
1
Visitas
14
adolfohnz
adolfohnz
Morgabe
Problemas al compartir imágenes en Twitter desde mi sitio web
Respuestas
1
Visitas
135
BotBeta
BotBeta
iiTzCarlos
Problemas con la descarga de imágenes de portada en DooPlay
Respuestas
5
Visitas
247
iiTzCarlos
iiTzCarlos
Atrás
Arriba