gambar yang disandikan base64 dalam tanda tangan email

95

Saya harus menyertakan beberapa gambar (logo perusahaan dll) di tanda tangan email. Saya mengalami berbagai masalah dalam menggunakan gambar yang disematkan yang dihasilkan oleh sistem email yang dipermasalahkan (umumnya dikirim sebagai lampiran) dan sebagai gambar tertaut (memerlukan izin untuk menampilkannya di email yang diterima).

Saya baru saja melihat beberapa email dari exchange yang memiliki representasi gambar base64 dari logo dan menggunakan tag untuk menampilkannya. Saya mencari beberapa informasi tentang bagaimana saya bisa melakukan ini dalam tanda tangan email jika memungkinkan (bagaimana cara membuat logo versi base64 untuk memulai dan kode apa yang saya perlukan untuk membuatnya berfungsi)?

Saya sudah mencoba hal-hal sederhana seperti 

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

tapi yang saya dapatkan hanyalah teks alt jadi jelas saya melakukan sesuatu yang salah di sini.

html image email base64 Peter Nunn
sumber
kemungkinan duplikat Cara menyematkan gambar di email
james.garriss

Jawaban:

63

Penting

Jawaban saya di bawah ini menunjukkan cara menyematkan gambar menggunakan URI data. Ini berguna untuk web, tetapi tidak akan berfungsi dengan andal untuk sebagian besar klien email . Untuk tujuan email, pastikan untuk membaca jawaban Shadow2531 .

Data Base-64 legal dalam sebuah imgtag dan saya yakin pertanyaan Anda adalah bagaimana cara memasukkan tag gambar seperti itu dengan benar.

Anda dapat menggunakan alat online atau beberapa baris kode untuk menghasilkan string basis 64.

Sintaks untuk mengambil gambar dari data sebaris adalah:

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

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

Tim Medora
sumber
14
Sudah mencoba ini tetapi Gmail tampaknya tidak mendukungnya. Solusi lampiran yang disematkan tampaknya berfungsi.
Indrek
Hai Tim akan sangat membantu jika Anda dapat memberikan beberapa masukan di stackoverflow.com/questions/11124540/… . Terima kasih sebelumnya. Hal lain adalah ada resolusi agar domain email seperti yahoo, gmail juga mendukung solusi Anda
M Sach
1
Saya pikir lampiran (seperti solusi @ Shadow2531) mungkin merupakan solusi yang lebih banyak didukung, tetapi satu-satunya cara untuk mengetahuinya adalah dengan menguji beberapa klien email utama dengan pengaturan keamanan berbeda yang diterapkan. Masalah yang lebih rumit adalah Anda dapat menerima email baik di web maupun di berbagai klien. Misalnya, Gmail mungkin berperilaku berbeda saat dilihat di web versus di dalam Outlook atau Thunderbird.
Tim Medora
Periksa tautan ini untuk dukungan penggunaan teknik ini di klien email campaignmonitor.com/blog/post/3927/… (tl; dr beberapa dukungan tetapi tidak konsisten, terutama di Outlook)
David Clarke
5
Apakah penyematan masih tidak dapat diandalkan untuk sebagian besar klien email pada tahun 2016?
Eirik Birkeland
129

Gambar harus disematkan dalam pesan sebagai lampiran seperti ini:

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

Dan, bagian HTML akan mereferensikan gambar seperti ini:

<img src="cid:0123456789">

Di beberapa klien, src = "sig.png" juga akan berfungsi.

Anda pada dasarnya memiliki pesan multipart / campuran, multipart / alternatif, multipart / terkait di mana lampiran gambar berada di bagian terkait.

Klien tidak boleh memblokir gambar ini karena tidak jauh.

Atau, berikut adalah contoh multipart / alternatif, multipart / terkait sebagai file mbox (simpan sebagai format windows newline dan letakkan baris kosong di akhir. Dan, jangan gunakan ekstensi atau ekstensi .mbs):

From 
From: [email protected]
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--

Anda dapat mengimpornya ke Sylpheed atau Thunderbird (dengan ekstensi alat Impor / Ekspor) atau klien email bawaan Opera. Kemudian, di Opera misalnya, Anda dapat memilih "lebih memilih teks biasa" untuk melihat perbedaan antara versi HTML dan teks. Bagaimanapun, Anda akan melihat versi HTML menggunakan gambar yang disematkan di sig.

Bayangan2531
sumber
akan sangat membantu jika Anda dapat memberikan beberapa masukan di stackoverflow.com/questions/11124540/… .
M Sach
@ MSach Akan melihat ketika saya mendapat kesempatan.
Shadow2531
4
Dapatkah Anda memberi tahu saya @ Shadow2531 ke mana tujuan kode multi bagian / terkait? apakah itu seharusnya dalam file HTML yang sama?
Faisal Ashfaq
1
"seperti ini" ... seperti apa? Saya dengan Faisal, bagaimana Anda memasukkan ini ke dalam pesan Anda ?
Pengacara Setan
1
Oke, komentar itu menggoyahkan pemahaman saya. Apa yang saya lakukan adalah membuat file HTM lalu memuatnya ke dalam outlook. Saya kemudian menggunakan fungsi "ganti gambar" editor tanda tangan untuk memilih file lokal (alih-alih gambar yang dikodekan base64 yang saya sertakan secara manual). Ini sepertinya melakukan apa yang Anda maksud. Terima kasih untuk tetap bersama saya.
Pengacara Setan
2

Baru-baru ini saya mengalami masalah yang sama untuk memasukkan gambar QR / png di email. Gambar QR adalah array byte yang dihasilkan menggunakan ZXing. Kami tidak ingin menyimpannya ke file karena menyimpan / membaca dari file terlalu mahal (lambat). Jadi kedua jawaban di atas tidak berhasil untuk saya. Inilah yang saya lakukan untuk mengatasi masalah ini:

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");

Misalkan contentId adalah "111122223333", maka bagian HTML Anda harus memiliki ini:

<img src="cid: 111122223333">

Tidak perlu mengubah byte array ke Base64 karena Commons Mail melakukan konversi untuk Anda secara otomatis. Semoga ini membantu.

JerryP
sumber