incrustación de imagen en correo electrónico html

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, con la imagen mostrándose como una X roja (en Outlook 2007 y yahoo mail)

He estado enviando correos electrónicos html durante algún tiempo, pero mis requisitos ahora son usar varias imágenes gif en el correo electrónico. Puedo almacenarlos en uno de nuestros servidores web y simplemente vincularlos, pero muchos clientes de correo electrónico de usuarios no los mostrarán automáticamente y necesitarán cambie la configuración o descárguela manualmente para cada correo electrónico.

Entonces, mis pensamientos son incrustar la imagen. Mis preguntas son:

  1. ¿Qué estoy haciendo mal aquí?
  2. ¿Es el enfoque de incrustación el correcto?
  3. ¿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 iconos que no tienen 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 adjuntarlo no funcionará (que yo sepa de todos modos).

Fragmento: 

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 propio html (usando el mismo uso de algo para crear datos de encabezado) y ver la imagen en Firefox/IE.

También debo señalar que esto NO es para spam, los correos electrónicos se envían a clientes específicos que lo esperan diariamente. El contenido está basado en datos y no en anuncios.

Author: tbone, 2011-07-15
Source

10 answers

Intente insertarlo directamente, de esta manera puede insertar varias imágenes en varias ubicaciones en el correo electrónico.

<img src="data:image/jpg;base64,/*base64-data-string here*/" />

Y hacer este post útil para que 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 algo como esto, pero realmente no puedo decirte para qué es 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--

/ / EDIT: Oh, me acabo de dar cuenta de que si 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 de mi publicación.

 108
Author: Bernd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-15 18:29:48

La otra solución es adjuntar la imagen como archivo adjunto y luego referenciarla en código html utilizando cid.

Código HTML: 

<html>
    <head>
    </head>
    <body>
        <img width=100 height=100 id=""1"" src=""cid:Logo.jpg"">
    </body>
</html>

Código C#: 

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();
 12
Author: Khyati Elhance,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-02 04:18:13

No encuentro ninguna de las respuestas aquí útiles, así que estoy proporcionando mi solución.

  1. El problema es que está utilizando multipart/related como el tipo de contenido que no es bueno en este caso. Estoy usando multipart/mixed y dentro de él multipart/alternative (funciona en la mayoría de los clientes).

  2. 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á

 9
Author: Pavel Perna,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-13 23:25:47

Si no funciona, puede probar una de estas herramientas que convierten la imagen en una tabla HTML (aunque tenga cuidado con el tamaño de su imagen):

 6
Author: Erwin Mayer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-14 03:05:08

Usar Base64 para incrustar imágenes en html es impresionante. Sin embargo, 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, subir sus imágenes a un servidor y cargar esas imágenes desde el servidor puede reducir el tamaño de su correo electrónico. (Usted puede obtener una gran cantidad de servicios gratuitos a través de Google)

2) Si solo hay unas pocas imágenes en su correo, usar cadenas base64 es definitivamente una opción increíble.

Además de las opciones proporcionado por respuestas existentes, también puede usar un comando para generar una cadena base64 en linux: 

base64 test.jpg
 4
Author: Brian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-16 10:28:37

  1. Necesita 3 límites para que las imágenes en línea sean totalmente compatibles.

  2. Todo va dentro del multipart/mixed.

  3. Luego use el multipart/related para contener los encabezados multipart/alternative y los adjuntos de la imagen.

  4. Por último, incluya sus archivos adjuntos descargables dentro del último límite de multipart/mixed.

 1
Author: Steven Newman,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-02-10 06:52:38

En realidad hay una muy buena entrada de 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 añadir un cuarto enfoque utilizando imágenes de fondo 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];
}
 1
Author: gerardv,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-09-09 19:27:48

Puede ser de interés que tanto Outlook como Outlook Express puedan generar estos formatos de correo electrónico de imagen de varias partes, si inserta los archivos de imagen utilizando la función de menú Insertar / Imagen.

Obviamente el tipo de correo electrónico debe configurarse en HTML (no en texto plano).

Cualquier otro método (por ejemplo, arrastrar/soltar, o cualquier invocación de línea de comandos) resulta en que la imagen(s) se envíe como un archivo adjunto.

Si luego se envía un correo electrónico a sí mismo, puede ver cómo está formateado! :)

FWIW, estoy buscando un ejecutable de Windows independiente que haga imágenes en línea desde el modo de línea de comandos, pero parece que no hay ninguna. Es un camino que muchos han recorrido... Uno puede hacerlo con decir Outlook Express, pasándole un formato apropiado .archivo eml.

 0
Author: Peter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-11-07 11:54:08

Para aquellos que no pudieron conseguir que una de estas soluciones funcionara: Enviar imagen en línea en el correo electrónico Siguiendo los pasos establecidos en la solución ofrecida por @T30, pude mostrar mi imagen en línea sin ser bloqueado por Outlook (métodos anteriores se bloqueó). Si está utilizando exchange como nosotros también al hacer: 

service = new ExchangeService(ExchangeVersion);
service.AutodiscoverUrl("[email protected]");
SmtpClient smtp = new SmtpClient(service.Url.Host);

Tendrá que pasarle su host url del servicio de intercambio. Aparte de que después de esta solución debe permitirle enviar fácilmente incrustado imgages.

 0
Author: tstrand66,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-15 20:38:50

Si está utilizando Outlook para enviar una imagen estática con hipervínculo, una forma fácil sería usar Word.

  1. Abrir MS Word
  2. Copie la imagen en una página en blanco
  3. Añadir hipervínculo a la imagen (Ctrl + K)
  4. Copie la imagen a su correo electrónico
 -18
Author: Claudio Viz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-25 09:54:44