immagini con codifica base64 nelle firme di posta elettronica

92

Devo includere alcune immagini (logo aziendale ecc.) Nelle firme e-mail. Ho avuto tutti i tipi di problemi utilizzando le immagini incorporate prodotte dal sistema di posta elettronica in questione (vengono generalmente inviate come allegati) e come immagini collegate (che richiedono l'autorizzazione per visualizzarle nell'e-mail ricevuta).

Ho appena visto alcune email da Exchange che hanno una rappresentazione dell'immagine in base64 del logo e utilizza un tag per eseguire la visualizzazione. Sto cercando alcune informazioni su come potrei farlo in una firma di posta elettronica, se possibile (come faccio a generare la versione base64 del logo per iniziare e quale codice mi serve per farlo funzionare)?

Ho provato cose semplici come 

<body>
<span>
<img src=.... >
</span>
</body>

ma tutto quello che ottengo è il testo alternativo, quindi ovviamente sto facendo qualcosa di sbagliato qui.

html  image  email  base64 
— Peter Nunn
fonte
possibile duplicato di How to embed images in email
— james.garriss

Risposte:

61

Importante

La mia risposta di seguito mostra come incorporare immagini utilizzando URI di dati. Ciò è utile per il Web, ma non funzionerà in modo affidabile per la maggior parte dei client di posta elettronica . Per scopi di posta elettronica assicurati di leggere la risposta di Shadow2531 .

I dati in base 64 sono legali in un imgtag e credo che la tua domanda sia come inserire correttamente tale tag immagine.

È possibile utilizzare uno strumento online o poche righe di codice per generare la stringa 64 di base.

La sintassi per ottenere l'immagine dai dati in linea è:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://en.wikipedia.org/wiki/Data_URI_scheme

— Tim Medora
fonte
13
Ho provato ma Gmail non sembra supportarlo. La soluzione per allegati incorporati sembra funzionare però.
— Indrek
Ciao Tim, sarebbe di grande aiuto se potessi fornire alcuni input su stackoverflow.com/questions/11124540/… . Grazie in anticipo. Un'altra cosa è che esiste una risoluzione in modo che il dominio di posta come yahoo, gmail supporti anche la tua soluzione
— M Sach,
1
Penso che gli allegati (come la soluzione di @ Shadow2531) possano essere la soluzione più ampiamente supportata, ma l'unico modo per saperlo è testare diversi principali client di posta elettronica con diverse impostazioni di sicurezza applicate. A complicare ulteriormente la questione è che puoi ricevere e-mail sia sul Web che in una varietà di client. Ad esempio, Gmail potrebbe comportarsi in modo diverso se visualizzato sul Web rispetto a Outlook o Thunderbird.
— Tim Medora
Controlla questo collegamento per il supporto per l'utilizzo di questa tecnica nei client di posta campaignmonitor.com/blog/post/3927/… (tl; dr un po 'di supporto ma incoerente, in particolare in Outlook)
— David Clarke
5
L'incorporamento è ancora inaffidabile per la maggior parte dei client di posta elettronica nel 2016?
— Eirik Birkeland
127

L'immagine dovrebbe essere incorporata nel messaggio come allegato in questo modo:

--boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Transfer-Encoding: base64
Content-ID: <0123456789>
Content-Location: sig.png

base64 data

--boundary

E la parte HTML farebbe riferimento all'immagine in questo modo:

<img src="cid:0123456789">

In alcuni client, funzionerà anche src = "sig.png".

Fondamentalmente avresti un messaggio multipart / misto, multipart / alternativo, multipart / correlato in cui l'allegato dell'immagine si trova nella parte correlata.

I clienti non dovrebbero bloccare questa immagine perché non è remota.

Oppure, ecco un esempio multipart / alternativo, multipart / correlato come file mbox (salva come formato newline di Windows e inserisci una riga vuota alla fine. E, non utilizzare alcuna estensione o l'estensione .mbs):

From 
From: from@example.com
To: to@example.com
Subject: HTML Messages with Embedded Pic in Signature
MIME-Version: 1.0
Content-Type: multipart/alternative; boundary="alternative_boundary"

This is a message with multiple parts in MIME format.

--alternative_boundary
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: 8bit

test

-- 
[Picture of a Christmas Tree]

--alternative_boundary
Content-Type: multipart/related; boundary="related_boundary"

--related_boundary
Content-Type: text/html; charset="utf-8"
Content-Transfer-Encoding: 8bit

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>test</p>
        <p class="sig">-- <br><img src="cid:0123456789"></p>
    </body>
</html>

--related_boundary
Content-Type: image/png; name="sig.png"
Content-Disposition: inline; filename="sig.png"
Content-Location: sig.png
Content-ID: <0123456789>
Content-Transfer-Encoding: base64

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
cHkgSG9saWRheXMgUGFnZQA7

--related_boundary--

--alternative_boundary--

Puoi importarlo in Sylpheed o Thunderbird (con l'estensione degli strumenti di importazione / esportazione) o nel client di posta integrato di Opera. Quindi, in Opera, ad esempio, puoi attivare "preferisci testo normale" per vedere la differenza tra la versione HTML e quella testuale. Ad ogni modo, vedrai che la versione HTML utilizza l'immagine incorporata nel sig.

— Shadow2531
fonte
sarebbe di grande aiuto se potessi fornire alcuni input su stackoverflow.com/questions/11124540/… .
— M Sach,
@MSach Darà un'occhiata quando ne avrò la possibilità.
— Shadow2531
4
Puoi dirmi @ Shadow2531 dove andrà il codice multipart / correlato? dovrebbe essere nello stesso file HTML?
— Faisal Ashfaq
1
"come questo" ... come cosa? Sono con Faisal, come lo inserisci nel tuo messaggio ?
— Devil's Advocate
1
Ok, quel commento ha scosso la mia comprensione. Quello che ho fatto è creare un file HTM e poi caricarlo in Outlook. Ho quindi utilizzato la funzionalità "Sostituisci immagine" degli editor di firme per selezionare un file locale (invece dell'immagine con codifica base64 che avevo incluso manualmente). Questo sembra fare quello che intendi. Grazie per essere rimasto con me.
— Devil's Advocate
2

Recentemente ho avuto lo stesso problema di includere l'immagine QR / png nell'e-mail. L'immagine QR è un array di byte generato utilizzando ZXing. Non vogliamo salvarlo in un file perché salvare / leggere da un file è troppo costoso (lento). Quindi entrambe le risposte sopra non funzionano per me. Ecco cosa ho fatto per risolvere questo problema:

import javax.mail.util.ByteArrayDataSource;
import org.apache.commons.mail.ImageHtmlEmail;
...
ImageHtmlEmail email = new ImageHtmlEmail();
byte[] qrImageBytes = createQRCode(); // get your image byte array
ByteArrayDataSource qrImageDataSource = new ByteArrayDataSource(qrImageBytes, "image/png");
String contentId = email.embed(qrImageDataSource, "QR Image");

Supponiamo che il contentId sia "111122223333", quindi la tua parte HTML dovrebbe avere questo:

<img src="cid: 111122223333">

Non è necessario convertire l'array di byte in Base64 perché Commons Mail esegue la conversione automaticamente. Spero che questo ti aiuti.

— JerryP
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.