intégration de l'image dans le courriel html

j'essaie d'envoyer un courriel html multipart/related avec des images GIF intégrées. Ce courriel est généré en utilisant Oracle PL / SQL. Mes tentatives ont échoué, avec l'image apparaît comme un X rouge (dans Outlook 2007 et yahoo mail)

j'ai envoyé des e-mails html depuis un certain temps, mais mes exigences sont maintenant d'utiliser plusieurs images gif dans l'e-mail. Je peux stocker ceux-ci sur l'un de nos serveurs web et juste lien vers eux, mais de nombreux utilisateurs clients de messagerie ne seront pas les montrer automatiquement et faudra changer les paramètres ou les télécharger manuellement pour chaque e-mail.

ainsi, mes pensées doivent intégrer l'image. Mes questions sont:

  1. Qu'est-ce que je fais de mal ici?
  2. L'approche d'intégration est-elle la bonne?
  3. D'autres options si j'ai besoin d'utiliser de plus en plus d'images? Les pièces jointes ne fonctionneront pas, car les images sont typiquement des logos et des icônes qui n'ont pas de sens le contexte du message. En outre, certains éléments de l'email sont des liens dans un système en ligne, de sorte que la génération d'un PDF statique et la fixation ne fonctionnera pas (à ma connaissance de toute façon).

extrait de:

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--

Merci beaucoup.

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

je dois également noter que ce n'est pas pour le spam, les e-mails sont envoyés à des clients spécifiques qui l'attendent tous les jours. Le contenu est basé sur des données et non sur des annonces.

81
demandé sur tbone 2011-07-15 16:23:13
la source

10 ответов

Essayez de l'insérer directement, de cette façon, vous pouvez insérer plusieurs images à divers endroits dans l'e-mail.

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

et de rendre ce poste utile pour d'autres à: Si vous n'avez pas de chaîne de données base64, créez-en une facilement à: http://www.motobit.com/util/base64-decoder-encoder.asp d'un fichier image.

Email code source ressemble à quelque chose comme ça, mais je ne peux vraiment pas vous dire ce que cette chose de limite est pour:

 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, je viens de réaliser que si vous insérez le premier extrait de code de mon poste d'écrire un e-mail avec thunderbird, thunderbird change automatiquement le code html de chercher à peu près le même que le deuxième code dans mon post.

108
répondu Bernd 2011-07-15 22:29:48
la source

l'autre solution consiste à attacher l'image en pièce jointe puis à la référencer en code html à l'aide du cid.

code 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();
12
répondu Khyati Elhance 2017-02-02 07:18:13
la source

Je ne trouve aucune réponse utile ici, donc je propose ma solution.

  1. le problème est que vous utilisez multipart/related comme type de contenu qui n'est pas bon dans ce cas. J'utilise multipart/mixed et à l'intérieur multipart/alternative (il fonctionne sur la plupart des clients).

  2. la structure du message doit être la suivante:

    [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--
    

puis il fonctionnera

9
répondu Pavel Perna 2017-11-14 02:25:47
la source

si cela ne fonctionne pas, vous pouvez essayer un de ces outils qui convertissent l'image en une table HTML (attention à la taille de votre image cependant):

6
répondu Erwin Mayer 2013-03-14 07:05:08
la source

utiliser Base64 pour intégrer des images en html est génial. Néanmoins, veuillez noter que base64 strings peut augmenter la taille de votre courriel.

donc,

1) Si vous avez beaucoup d'images, télécharger vos images sur un serveur et charger ces images à partir du serveur peut réduire la taille de votre email. (Vous pouvez obtenir beaucoup de services gratuits via Google)

2) S'il n'y a que quelques images dans votre mail, utiliser les chaînes de base64 est certainement une super option.

outre les choix offerts par les réponses existantes, vous pouvez également utiliser une commande pour générer une chaîne base64 sur linux:

base64 test.jpg
4
répondu Brian 2014-11-16 13:28:37
la source
  1. vous avez besoin de 3 limites pour que les images en ligne soient entièrement conformes.

  2. tout rentre dans le multipart/mixed .

  3. utilisez ensuite le multipart/related pour contenir votre multipart/alternative et vos en-têtes de fixation d'image.

  4. enfin, incluez vos pièces jointes téléchargeables à l'intérieur de la dernière limite de multipart/mixed .

1
répondu Steven Newman 2015-02-10 09:52:38
la source

il y a en fait un très bon billet de blog qui répertorie les pour et les contre de trois approches différentes à ce problème par Martyn Davies. Vous pouvez le lire à https://sendgrid.com/blog/embedding-images-emails-facts / .

j'aimerais ajouter une quatrième approche en utilisant des images de fond CSS.

ajouter

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

à votre organisme de messagerie électronique 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];
}
1
répondu gerardv 2017-09-09 22:27:48
la source

il peut être intéressant que Outlook et Outlook Express puissent générer ces formats d'e-mail d'image multipartis, si vous insérez les fichiers d'image en utilisant la fonction Insert / Picture menu.

évidemment, le type de courriel doit être en HTML (pas en 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 en pièce jointe.

Si vous envoyez un courrier électronique à vous-même, vous pouvez voir comment il est formaté! :)

FWIW, je suis à la recherche d'un autonome exécutable windows qui fait des images en ligne de la mode de ligne de commande, mais il semble y avoir aucun. C'est un chemin dont beaucoup ont disparu... On peut le faire avec say Outlook Express, en lui passant un formaté approprié .fichier eml.

0
répondu Peter 2014-11-07 14:54:08
la source

pour ceux qui n'ont pas pu faire fonctionner une de ces solutions: envoyer l'image en ligne dans l'email En suivant les étapes exposées dans la solution offerte par @T30, j'ai pu obtenir mon image en ligne à afficher sans être bloqué par outlook (méthodes précédentes il a été bloqué). Si vous utilisez exchange comme nous le faisons:

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

vous aurez besoin de lui passer votre serveur d'url de service d'échange. Autre que celui qui suit le présent la solution devrait vous permettre d'envoyer facilement des imgages intégrés.

0
répondu tstrand66 2018-08-15 23:38:50
la source

Si vous utilisez Outlook pour envoyer une image statique avec lien hypertexte est un moyen facile serait d'utiliser Word.

  1. Open MS Word
  2. copier l'image sur une page blanche
  3. ajouter l'hyperlien à l'image (Ctrl + K)
  4. Copiez l'image dans votre courriel
-18
répondu Claudio Viz 2015-05-25 12:54:44
la source

Autres questions sur