169 votes

intégration d'une image dans un courriel html

J'essaie d'envoyer un email html multipart/related avec des images gif intégrées. Cet email est généré à l'aide d'Oracle PL/SQL. Mes tentatives ont échoué, l'image apparaissant sous la forme d'un X rouge (dans Outlook 2007 et yahoo mail).

J'envoie des courriels en html depuis un certain temps, mais j'ai maintenant besoin d'utiliser plusieurs images gif dans le courriel. Je peux les stocker sur l'un de nos serveurs web et créer un lien vers elles, mais de nombreux clients de messagerie ne les afficheront pas automatiquement et il faudra soit modifier les paramètres, soit les télécharger manuellement pour chaque e-mail.

Je pense donc qu'il faut intégrer l'image. Mes questions sont les suivantes :

  1. Qu'est-ce que je fais de travers ?
  2. L'approche de l'intégration est-elle la bonne ?
  3. Y a-t-il d'autres options si je dois utiliser de plus en plus d'images ? Les pièces jointes ne fonctionnent pas, car les images sont généralement des logos et des icônes qui n'ont pas de sens dans le contexte du message. De plus, certains éléments de l'e-mail sont des liens vers un système en ligne, de sorte que la génération d'un PDF statique et sa mise en pièce jointe ne fonctionneront pas (à ma connaissance en tout cas).

extrait :

MIME-Version: 1.0
To: me@gmail.com
BCC: me@yahoo.com
From: email@yahoo.com
Subject: Test
Reply-To: email@yahoo.com
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--

Merci beaucoup.

BTW : Oui, j'ai vérifié que les données base64 sont correctes, car je peux intégrer l'image dans le html lui-même (en utilisant le même algo que celui utilisé pour créer les données d'en-tête) et voir l'image dans Firefox/IE.

Je tiens également à préciser qu'il ne s'agit PAS de spam, les courriels sont envoyés à des clients spécifiques qui les attendent quotidiennement. Le contenu est basé sur des données et non sur des publicités.

5voto

Brian Points 3134

Utilisation de Base64 pour intégrer des images

T

1

2

B

base64 test.jpg

3voto

tstrand66 Points 775

Pour ceux qui n'ont pas réussi à faire fonctionner l'une de ces solutions : Envoyer une image en ligne dans un courriel En suivant les étapes décrites dans la solution proposée par @T30, j'ai pu faire en sorte que mon image inline s'affiche sans être bloquée par outlook (les méthodes précédentes la bloquaient). Si vous utilisez exchange comme nous le faisons, alors aussi lorsque vous faites :

service = new ExchangeService(ExchangeVersion);
service.AutodiscoverUrl("email@domain.com");
SmtpClient smtp = new SmtpClient(service.Url.Host);

vous devrez lui transmettre l'url de l'hôte de votre service d'échange. Sinon, cette solution devrait vous permettre d'envoyer facilement des images intégrées.

2voto

Peter Points 11

Il peut être intéressant de noter qu'Outlook et Outlook Express peuvent tous deux générer ces formats de courrier électronique à images multiples, si vous insérez les fichiers d'images à l'aide de la fonction du menu Insérer / Image.

Il est évident que le type de courrier électronique doit être défini sur HTML (et non sur texte simple).

Toute autre méthode (par exemple, glisser/déposer ou toute invocation en ligne de commande) entraîne l'envoi de l'image ou des images en tant que pièce jointe.

Si vous vous envoyez un tel courriel à vous-même, vous pouvez voir comment il est formaté :)

À titre d'information, je cherche un exécutable Windows autonome qui fasse des images en ligne à partir de la ligne de commande, mais il semble qu'il n'y en ait pas. C'est un chemin que beaucoup ont emprunté... On peut le faire avec Outlook Express, par exemple, en lui transmettant un fichier .eml formaté de manière appropriée.

2voto

gveneman Points 38

Martyn Davies a publié un très bon article de blog qui énumère les avantages et les inconvénients de trois approches différentes de ce problème. Vous pouvez le lire à l'adresse suivante https://sendgrid.com/blog/embedding-images-emails-facts/ .

J'aimerais ajouter une quatrième approche en utilisant les images d'arrière-plan CSS.

Ajouter

<div id="myImage"></div>

dans le corps de votre e-mail et une classe css comme :

#myImage {
    background-image:  url('data:image/png;base64,iVBOR...[some more encoding]...rkggg==');
    width: [the-actual-image-width];
    height: [the-actual-image-height];
}

0voto

Tarik Points 3304

Voici un code de travail avec deux façons d'y parvenir :

using System;
using Outlook = Microsoft.Office.Interop.Outlook;

namespace ConsoleApp2
{
    class Program
    {
        static void Main(string[] args)
        {

            Method1();
            Method2();
        }

        public static void Method1()
        {
            Outlook.Application outlookApp = new Outlook.Application();
            Outlook.MailItem mailItem = outlookApp.CreateItem(Outlook.OlItemType.olMailItem);
            mailItem.Subject = "This is the subject";
            mailItem.To = "john@example.com";
            string imageSrc = "D:\\Temp\\test.jpg"; // Change path as needed

            var attachments = mailItem.Attachments;
            var attachment = attachments.Add(imageSrc);
            attachment.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x370E001F", "image/jpeg");
            attachment.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001F", "myident"); // Image identifier found in the HTML code right after cid. Can be anything.
            mailItem.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/id/{00062008-0000-0000-C000-000000000046}/8514000B", true);

            // Set body format to HTML

            mailItem.BodyFormat = Outlook.OlBodyFormat.olFormatHTML;
            string msgHTMLBody = "<html><head></head><body>Hello,<br><br>This is a working example of embedding an image unsing C#:<br><br><img align=\"baseline\" border=\"1\" hspace=\"0\" src=\"cid:myident\" width=\"\" 600=\"\" hold=\" /> \"></img><br><br>Regards,<br>Tarik Hoshan</body></html>";
            mailItem.HTMLBody = msgHTMLBody;
            mailItem.Send();
        }

        public static void Method2()
        {

            // Create the Outlook application.
            Outlook.Application outlookApp = new Outlook.Application();

            Outlook.MailItem mailItem = (Outlook.MailItem)outlookApp.CreateItem(Outlook.OlItemType.olMailItem);

            //Add an attachment.
            String attachmentDisplayName = "MyAttachment";

            // Attach the file to be embedded
            string imageSrc = "D:\\Temp\\test.jpg"; // Change path as needed

            Outlook.Attachment oAttach = mailItem.Attachments.Add(imageSrc, Outlook.OlAttachmentType.olByValue, null, attachmentDisplayName);

            mailItem.Subject = "Sending an embedded image";

            string imageContentid = "someimage.jpg"; // Content ID can be anything. It is referenced in the HTML body

            oAttach.PropertyAccessor.SetProperty("http://schemas.microsoft.com/mapi/proptag/0x3712001E", imageContentid);

            mailItem.HTMLBody = String.Format(
                "<body>Hello,<br><br>This is an example of an embedded image:<br><br><img src=\"cid:{0}\"><br><br>Regards,<br>Tarik</body>",
                imageContentid);

            // Add recipient
            Outlook.Recipient recipient = mailItem.Recipients.Add("john@example.com");
            recipient.Resolve();

            // Send.
            mailItem.Send();
        }
    }
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X