tamaño - imagen incrustada en html correo electrónico
posicionar imagen html (9)
Estoy tratando de enviar un correo electrónico html multiparte / relacionado con imágenes gif incrustadas. Este correo electrónico se genera utilizando Oracle PL / SQL. Mis intentos han fallado, y la imagen aparece como una X roja (en Outlook 2007 y correo yahoo)
He estado enviando correos electrónicos html por un tiempo, pero mis requisitos ahora son usar varias imágenes gif en el correo electrónico. Puedo almacenar estos en uno de nuestros servidores web y solo vincularlos, pero muchos usuarios que envían correos electrónicos a los clientes no los mostrarán automáticamente y deberán cambiar la configuración o descargarlos manualmente para cada correo electrónico.
Entonces, mi pensamiento es incrustar la imagen. Mis preguntas son:
- ¿Qué estoy haciendo mal aquí?
- ¿El enfoque de integración es el correcto?
- ¿Alguna otra opción si necesito usar más y más imágenes? Los archivos adjuntos no funcionarán, ya que las imágenes suelen ser logotipos e íconos que no tendrán sentido fuera del contexto del mensaje. Además, algunos elementos del correo electrónico son enlaces a un sistema en línea, por lo que generar un PDF estático y adjuntar no funcionará (que yo sepa de todos modos).
retazo:
MIME-Version: 1.0
To: [email protected]
BCC: [email protected]
From: [email protected]
Subject: Test
Reply-To: [email protected]
Content-Type: multipart/related; boundary="a1b2c3d4e3f2g1"
--a1b2c3d4e3f2g1
content-type: text/html;
<html>
<head><title>My title</title></head>
<body>
<div style="font-size:11pt;font-family:Calibri;">
<p><IMG SRC="cid:my_logo" alt="Logo"></p>
... more html here ...
</div></body></html>
--a1b2c3d4e3f2g1
Content-Type: image/gif;
Content-ID:<my_logo>
Content-Transfer-Encoding: base64
Content-Disposition: inline
[base64 image data here]
--a1b2c3d4e3f2g1--
Muchas gracias.
Por cierto: sí, he verificado que los datos de base64 son correctos, ya que puedo incrustar la imagen en el html mismo (usando el mismo uso de algo para crear datos de encabezado) y ver la imagen en Firefox / IE.
También debería tener en cuenta que esto NO es para correo basura, los correos electrónicos se envían a clientes específicos que lo esperan a diario. El contenido está basado en datos y no en anuncios.
Necesita 3 límites para que las imágenes en línea sean totalmente compatibles.
Todo va dentro de
multipart/mixed.Luego use el
multipart/relatedpara contener sumultipart/alternativey sus encabezados de adjuntos de imágenes.Por último, incluye tus archivos adjuntos descargables dentro del último límite de
multipart/mixed.
De hecho, hay una muy buena publicación en el blog que enumera los pros y los contras de tres enfoques diferentes a este problema por Martyn Davies. Puede leerlo en https://sendgrid.com/blog/embedding-images-emails-facts/ .
Me gustaría agregar un cuarto enfoque usando imágenes de fondo de CSS.
Añadir
<div id="myImage"></div>
a su cuerpo de correo electrónico y una clase css como:
#myImage {
background-image: url(''data:image/png;base64,iVBOR...[some more encoding]...rkggg=='');
width: [the-actual-image-width];
height: [the-actual-image-height];
}
Intente insertarlo directamente, de esta forma puede insertar varias imágenes en varias ubicaciones del correo electrónico.
<img src="data:image/jpg;base64,/*base64-data-string here*/" />
Y para que esta publicación sea útil para otros: si no tiene una cadena de datos base64, cree una fácilmente en: http://www.motobit.com/util/base64-decoder-encoder.asp desde un archivo de imagen .
El código fuente del correo electrónico se ve más o menos así, pero realmente no puedo decirte para qué sirve ese límite:
To: [email protected]
Subject: ...
Content-Type: multipart/related;
boundary="------------090303020209010600070908"
This is a multi-part message in MIME format.
--------------090303020209010600070908
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15">
</head>
<body bgcolor="#ffffff" text="#000000">
<img src="cid:part1.06090408.01060107" alt="">
</body>
</html>
--------------090303020209010600070908
Content-Type: image/png;
name="moz-screenshot.png"
Content-Transfer-Encoding: base64
Content-ID: <part1.06090408.01060107>
Content-Disposition: inline;
filename="moz-screenshot.png"
[base64 image data here]
--------------090303020209010600070908--
// EDITAR: Oh, me acabo de dar cuenta de que si insertas el primer fragmento de código de mi publicación para escribir un correo electrónico con Thunderbird, Thunderbird cambia automáticamente el código html para que se vea más o menos igual que el segundo código en mi publicación.
La otra solución es adjuntar la imagen como archivo adjunto y luego hacer referencia al código html usando cid.
Código HTML:
<html>
<head>
</head>
<body>
<img width=100 height=100 id=""1"" src=""cid:Logo.jpg"">
</body>
</html>
C # Code:
EmailMessage email = new EmailMessage(service);
email.Subject = "Email with Image";
email.Body = new MessageBody(BodyType.HTML, html);
email.ToRecipients.Add("[email protected]");
string file = @"C:/Users/acv/Pictures/Logo.jpg";
email.Attachments.AddFileAttachment("Logo.jpg", file);
email.Attachments[0].IsInline = true;
email.Attachments(0).ContentId = "Logo.jpg";
email.SendAndSaveCopy();
No creo que ninguna de las respuestas aquí sea útil, así que estoy brindando mi solución.
El problema es que está usando
multipart/relatedcomo el tipo de contenido que no es bueno en este caso. Estoy usandomultipart/mixedy dentro de élmultipart/alternative(funciona en la mayoría de los clientes).La estructura del mensaje debe ser la siguiente:
[Headers] Content-type:multipart/mixed; boundary="boundary1" --boundary1 Content-type:multipart/alternative; boundary="boundary2" --boundary2 Content-Type: text/html; charset=ISO-8859-15 Content-Transfer-Encoding: 7bit [HTML code with a href="cid:..."] --boundary2 Content-Type: image/png; name="moz-screenshot.png" Content-Transfer-Encoding: base64 Content-ID: <part1.06090408.01060107> Content-Disposition: inline; filename="moz-screenshot.png" [base64 image data here] --boundary2-- --boundary1--
Entonces funcionará
Puede ser interesante que tanto Outlook como Outlook Express puedan generar estos formatos de correo electrónico de imagen multiparte, si inserta los archivos de imagen usando la función de menú Insertar / Imagen.
Obviamente, el tipo de correo electrónico debe establecerse en HTML (no en texto sin formato).
Cualquier otro método (por ejemplo, arrastrar / soltar, o cualquier invocación de línea de comandos) da como resultado que la (s) imagen (es) se envíen como un archivo adjunto.
Si luego se envía un correo electrónico de ese tipo, ¡puede ver cómo está formateado! :)
FWIW, estoy buscando un ejecutable de Windows independiente que hace imágenes en línea desde el modo de línea de comandos, pero parece que no hay ninguno. Es un camino que muchos han subido ... Uno puede hacerlo con decir Outlook Express, pasando un archivo .eml apropiadamente formateado.
Si está utilizando Outlook para enviar una imagen estática con hipervínculo, una manera fácil sería usar Word.
- Abre MS Word
- Copie la imagen en una página en blanco
- Añadir hipervínculo a la imagen (Ctrl + K)
- Copia la imagen a tu correo electrónico
Si no funciona, puede probar una de estas herramientas que convierten la imagen en una tabla HTML (pero tenga cuidado con el tamaño de su imagen):
Usar Base64 para incrustar imágenes en html es increíble. No obstante, tenga en cuenta que las cadenas base64 pueden hacer que su tamaño de correo electrónico sea grande.
Por lo tanto,
1) Si tiene muchas imágenes, cargar sus imágenes a un servidor y cargar esas imágenes desde el servidor puede reducir el tamaño de su correo electrónico. (Puede obtener muchos servicios gratuitos a través de Google)
2) Si solo hay unas pocas imágenes en su correo, usar bases64 strings es definitivamente una opción increíble.
Además de las opciones proporcionadas por las respuestas existentes, también puede usar un comando para generar una cadena base64 en Linux:
base64 test.jpg