Html Base64 图像到 Gmail
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3279523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Base64 images to gmail
提问by Steven Baughman
I'm generating some inline images for an email sent from the iPad. Looks great in all desktop email clients, but gmail doesn't seem to like the base64 image and it shows up as text.
我正在为从 iPad 发送的电子邮件生成一些内嵌图像。在所有桌面电子邮件客户端中看起来都很棒，但 gmail 似乎不喜欢 base64 图像并且它显示为文本。
Anyone have any luck embedding images with base64 and gmail? Or know of a better solution for sending HTML emails with images from the iPad?
任何人都可以使用 base64 和 gmail 嵌入图像吗？或者知道从 iPad 发送带有图像的 HTML 电子邮件的更好解决方案吗？
采纳答案by cusman
The links from Moin Zaman show test results that are outdated (from 2008). As of my thorough testing today Gmail does support displaying embedded images for both methods.
Moin Zaman 的链接显示了过时的测试结果（从 2008 年开始）。根据我今天的全面测试，Gmail 确实支持显示两种方法的嵌入图像。
Use base64 encoding image inline within <img src="...">
内联使用 base64 编码图像 <img src="...">
<html><body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO..."></body></html>
Use base64 encoded image as attachment
使用 base64 编码的图像作为附件
Message-ID: <[email protected]>
Accept-Language: en-US
Content-Language: en-US
X-MS-Has-Attach: yes
X-MS-TNEF-Correlator:
x-originating-ip: [xxx.xxx.xxx.xxx]
Content-Type: multipart/related;
boundary="_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_";
type="multipart/alternative"
MIME-Version: 1.0
Return-Path: [email protected]
X-OriginatorOrg: example.com
--_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: multipart/alternative;
boundary="_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_"
...skipping Content-Type: text/plain which would be here for this example...
--_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: text/html; charset="iso-8859-1"
Content-Transfer-Encoding: quoted-printable
<html><body><img border=3D"0" width=3D"980" height=3D"230" id=3D"Picture_x0020_1" src==3D"cid:[email protected]"></body></html>
--_000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_--
--_038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
Content-Type: image/png; name="image001.png"
Content-Description: image001.png
Content-Disposition: inline; filename="image001.png"; size=32756;
creation-date="Mon, 08 Oct 2012 15:27:07 GMT";
modification-date="Mon, 08 Oct 2012 15:27:07 GMT";
Content-ID: <[email protected]>
Content-Transfer-Encoding: base64
iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO
xAAADsQBlSsOGwAAf5lJREFUeF7tvQlgVdW18L+ZR20mpsSLCYlBQKwgwRCMr9TAqzg0CAl98Y9a
ikBfHxL1A/r0tUr77Feg1mDav4LUijxTk8hLRIstQ2mJhEiAWAEpNCGRa8KUSQXCzLf2cOZz7j33
5s5Zx6j3nruHtX97n33WWWfttbtdv36d4IEEkAASQAJIAAkgASSABJCA/wl0938VWAMSQAJIAAkg
ASSABJAAEkAClAAq3zgOkAASQAJIAAkgASSABJBAgAig8h0g0FgNEkACSAAJIAEkgASQABJA5RvH
...
To do your own testing, you can send email with inline embedded image using one of the following techniques
要进行自己的测试，您可以使用以下技术之一发送带有内嵌嵌入图像的电子邮件
- Using code by creating your own base64 image strings
- Enable and use Google Lab for Inserting Images
- Paste image into Email client like Outlook 2010
- 通过创建自己的 base64 图像字符串来使用代码
- 启用并使用Google Lab 插入图像
- 将图像粘贴到 Outlook 2010 等电子邮件客户端中
Send an email using one of the above to your Gmail account, then open the Email in Gmail Web Client (any browser that works) and use the Down-Arrow next to the Reply button to choose the Show Original option. This will show you how it is received.
使用上述方法之一向您的 Gmail 帐户发送电子邮件，然后在 Gmail 网络客户端（任何可用的浏览器）中打开电子邮件，并使用“回复”按钮旁边的向下箭头选择“显示原件”选项。这将向您展示它是如何被接收的。
I think best practice is to use the embedded image as attachment method.
我认为最好的做法是使用嵌入的图像作为附件方法。
In my testing with Gmail Web Client, if I sent 30 images in a single email of different sizes, a few would not load successfully showing image container but not the image. If that happens, try reloading the page.
在我使用 Gmail Web Client 进行测试时，如果我在一封电子邮件中发送了 30 张不同大小的图像，其中一些将无法成功加载，显示图像容器而不是图像。如果发生这种情况，请尝试重新加载页面。
In my testing (Windows 7)...
在我的测试中（Windows 7）...
- Chrome (latest) needed a couple of reloads to successfully load/show all 30 images
- Opera (latest) wouldn't successfully show all 30 images regardless of number of reloads
- Firefox (latest) consistently showed all 30 images without issue
- Internet Explorer 9 (latest) consistently showed all 30 images without issue
- Safari (latest) consistently showed all 30 images without issue
- Chrome（最新）需要重新加载几次才能成功加载/显示所有 30 张图片
- 无论重新加载的次数如何，Opera（最新）都不会成功显示所有 30 个图像
- Firefox（最新）始终显示所有 30 个图像而没有问题
- Internet Explorer 9（最新）一致地显示所有 30 个图像没有问题
- Safari（最新）始终显示所有 30 张图像而没有问题
回答by Moin Zaman
There doesn't seem to by any official documentation but Gmail definitely doesn't support this, inline or as an attachment in base64.
任何官方文档似乎都没有，但 Gmail 绝对不支持这一点，内联或作为 base64 中的附件。
Here is some testing that campaign monitor tried:
Embedding images in email
Embedding images revisited
以下是活动监视器尝试的一些测试：
在电子邮件中
嵌入图像 重新访问嵌入图像
回答by valexa
Make sure you set Content-Type: multipart/mixed; , boundary and Content-Transfer-Encoding: base64
确保设置 Content-Type: multipart/mixed; ，边界和内容传输编码：base64
回答by Kamil Kie?czewski
I test that gmail don support also raw data uri images (without base64) - I use this snippet to generate image (which then was send to gmail addres) - but images not show up :(
我测试gmail不支持原始数据uri图像（没有base64） - 我使用这个片段来生成图像（然后被发送到gmail地址） - 但图像没有显示:(
To solve this issue you need to add images as attachements with cid and use that cid in img tags <img src="cid:123456">- more details here
要解决此问题，您需要将图像添加为带有 cid 的附件，并在 img 标签中使用该 cid <img src="cid:123456">-此处有更多详细信息
function convert() {
let base64 = imageBase64.value.split('base64,')[1];
let hex = [...atob(base64)].map(c => c.charCodeAt(0).toString(16).padStart(2, 0));
let img = 'data:image/png,%' + hex.join('%');
pic.src = img;
msg.innerText = img;
}Put your img base64 data uri here<br>
<input style="width:200px" id='imageBase64' value="data:image/bmp;base64,Qk0aAwAAAAAAABsAAAAMAAAAEAAQAAEAGAAAAAAACFpyAAAAAAAACB/NCB/NCB/NCB/NAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NAAAAAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NAAAAAAAAAAAAKoH8AAAACFpyCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCFpyCFpyKoH8KoH8KoH8AAAACB/NCB/NCFpyCB/NCB/NKoH8CB/NCB/NKoH8CB/NCFpyCFpyKoH8KoH8CFpyCFpyCFpyCFpyCFpyCFpyCB/NCB/NCB/NCB/NCB/NAAAAAAAACFpyAAAACFpyCFpyCFpyCFpyCFpyCFpyCFpyCB/NCFpyCFpyCFpyCB/NAAAAAAAACFpyAAAAAAAACFpyCFpyCFpyCFpyCFpyCB/NCFpyCFpyCFpyCB/NCFpyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKoH8KoH8KoH8KoH8KoH8KoH8KoH8CFpyAAAAAAAAAAAAAAAAAAAAAAAACFpyCFpyKoH8KoH8KoH8KoH8CFpyCFpyCFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACFpyKoH8CFpyCFpyKoH8KoH8KoH8CFpyKoH8KoH8KoH8CFpyAAAAAAAAAAAAAAAACFpyKoH8CFpyKoH8KoH8KoH8CFpyKoH8KoH8CFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACFpyCFpyCFpyKoH8KoH8CFpyKoH8AAAACFpyCFpyCFpyAAAAAAAAAAAAAAAAAAAACB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NCB/NKoH8KoH8AAAAAAAAAAAAAAAAAAAAAAAACB/NCB/NCB/NCB/NCB/NAAAAAAAAKoH8KoH8KoH8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKoH8KoH8KoH8">
<button onclick="convert()">Convert</button><br> Result
<br>
<textarea id='msg' rows="4" cols="50"></textarea><br>
<img id='pic'>回答by Ivan Extremera
This works fine: I set two src attribute, one with data:image/png;base64 and the other with the link to the image. When you use gmail, it use the src attribute with link and when you use other client of email it use the src attribute with data:image/png;base64. Try it!. you will see.
这很好用：我设置了两个 src 属性，一个带有 data:image/png;base64，另一个带有指向图像的链接。当您使用 gmail 时，它使用带有链接的 src 属性，当您使用其他电子邮件客户端时，它使用带有 data:image/png;base64 的 src 属性。尝试一下！。你会看见。
回答by Shivek Parmar
Try This Buddies.. I m sure this Would work to include an image as an attachment
试试这个好友..我相信这可以将图像作为附件包含在内
$output_hex_string_img = $image;
$output_bin_string_img = base64_decode($output_hex_string_img);
//echo base64_encode( $output_bin_string_img );
$XXX = base64_encode( $output_bin_string_img );
$from_name = "Senders Name";
$from_mail = "[email protected]";
$replyto = "[email protected]";
$subject = "Device Missing Notification";
$message = "Device Missing notification has been activated on your device. Please change this setting when you find your smartphone back. Best Of Luck!!\r\r ";
$mailto = '[email protected]';
$file = $XXX;
$filename = "Print_shot.png";
$uid = md5(uniqid(time()));
$name = basename($file);
$header = "From: ".$from_name." <".$from_mail.">\r\n";
$header .= "Reply-To: ".$replyto."\r\n";
$header .= "MIME-Version: 1.0\r\n";
$header .= "Content-Type: multipart/mixed; boundary=\"".$uid."\"\r\n\r\n";
$header .= "This is a multi-part message in MIME format.\r\n";
$header .= "--".$uid."\r\n";
$header .= "Content-type:text/html; charset=iso-8859-1\r\n";
$header .= "Content-Transfer-Encoding: 7bit\r\n\r\n";
$header .= $message."\r\n\r\n";
$header .= "--".$uid."\r\n";
$header .= "Content-Type: application/octet-stream; name=\"".$filename."\"\r\n"; // use different content types here
$header .= "Content-Transfer-Encoding: base64\r\n";
$header .= "Content-Disposition: attachment; filename=\"".$filename."\"\r\n\r\n";
$header .= $file."\r\n\r\n";
$header .= "--".$uid."--";
mail($mailto, $subject, "", $header);
But you have to include everything inside headers by using different Content-Type in headers. and whatever Appear in the Body which could be the third parameter in the mail function will be passed as a blank string..
但是您必须通过在标题中使用不同的 Content-Type 将所有内容包含在标题中。并且任何出现在正文中的可能是邮件函数中的第三个参数都将作为空字符串传递..
回答by Lion
MFMailComposeViewController *picker = [[MFMailComposeViewController alloc] init];
[picker addAttachmentData:UIImageJPEGRepresentation(_tempImage,1) mimeType:mimeType fileName:filename];
[picker setMessageBody:emailBody isHTML:YES];
If isHTMLis YES, addAttachmentDatawill auto change to base64 string, in email html can see you img.
如果isHTML是YES，addAttachmentData将自动转换为base64字符串，在电子邮件html中可以看到你的img。
If isHTMLis NO, addAttachmentDatais attachment.
如果isHTML是NO，addAttachmentData则是依恋。
