Estoy tratando de enviar correos por gmail con nodemailer, pero el problema es que la empresa en la que estoy los abre desde Outlook y desde el correo de Windows 10, el problema es que tengo que incrustar imágenes como el logotipo y un fondo. Funciona bien adjuntar las imágenes, pero no quiero que se vean como imágenes para descargar cuando abra el correo electrónico.
Pruebe varias opciones, como convertir la imagen a base64 o usar la imagen como enlace, pero este último solo funciona de la siguiente manera:
<img data-imagetype="External" src="https://imgur.com/nTjrntx.png"/> Como pueden ver cuando pongo el data-imagetype =" External " funciona, el problema es que quiero poner una imagen de fondo, para esto uso la propiedad de background: url ()
¿Hay alguna manera de poner el data-imagetype dentro del background: url () ?
Ya que si pongo este código html no funciona:
<main style="position: relative;display:flex;flex-direction:column;"> <section style="z-index: 1;"> <img data-imagetype="External" src="https://imgur.com/JzrkOXb.png" /> </section> <section style="position: absolute; z-index: 2;left:20%;right:20%;margin-top:10%"> Hello People </section> </main>Entiendo que no funciona por la incompatibilidad de estilos CSS que pueden procesar los clientes de correo
Así que este es el código que tengo:
<!DOCTYPE html> <html > <body> <main style="padding-left:40px;padding-right:40px;border:0.5px solid #e5e5e5;margin-top:20px;border-radius:2px;background-image:url('https://imgur.com/JzrkOXb.png');background-repeat: no-repeat;background-position:center;background-size: 100% 100%;background-color:#2AEDC2;"> <p style="font-size:20px;text-align:center;color:black"><strong>Hello People</strong></p><br /> <p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut quam leo. Donec ut felis in arcu fermentum pulvinar.</p><br /> <p style="text-align:center;">!REGARDS!</p><br /><br /><br /> </main> </body> </html>Lograr lo imposible, podría colocar la imagen de fondo y el texto encima, así:
<td valign="top" style="background-image:url(https://imgur.com/JzrkOXb.png);background-repeat: no-repeat;background-position:center;background-size: 100% 100%;> <!--[if gte mso 9]> <v:image data-imagetype="External" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width:850px;height:350px;" src="https://imgur.com/JzrkOXb.png" /> <v:rect data-imagetype="External" xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline- block;position: absolute; width:700px;height:250px;margin- left:80px;margin-top:50px;"> <v:fill opacity="0%" /> <v:textbox inset="0,0,0,0"> <![endif]--> <div style="color:#808080"> <p style="font-size:20px;text-align:center;"><strong>Dear people. </strong></p><br /> <p style="text-align:center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut fringilla elit.</p><br /> <p style="text-align:center;">!REGARDS!</p><br /><br /><br /> <table width="100%" cellpadding="0px" cellspacing="0px"></table><br /><br /><br /> </div> <!--[if gte mso 9]> </v:textbox> </v:fill> </v:rect> </v:image> <![endif]--> </td> Como pueden ver, tuve que usar el lenguaje VML, en el que la clave es que en esta línea v: image data-imagetype = "External" xmlns: v = "urn: schemas-microsoft-com: vml ... cuando colocar el tipo de imagen funcionó maravillosamente en varios clientes de correo, como Windows 10 Mail, Outlook, Gmail y Yahoo.
Les dejo un poco de la documentación de VML: https://docs.microsoft.com/en-us/windows/win32/vml/web-workshop---how-to-use-vml-on-web-pages- ----imagen--elemento
Aunque el único detalle es que al parecer en web y dispositivos móviles al querer cambiar el color de la letra a negro cambia a blanco y viceversa.
Estoy feliz de haberlo logrado y espero que les sirva a los que tienen el mismo problema que yo :)