Base64图像到gmail [英] Base64 images to gmail

查看：335
本文介绍了Base64图像到gmail的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在为从iPad发送的电子邮件生成一些内联图像。在所有桌面电子邮件客户端看起来不错，但是gmail似乎并不喜欢base64图像，并且显示为文本。



任何人都有运气嵌入图像与base64和Gmail吗？
或者知道用iPad发送HTML电子邮件的更好的解决方案？

解决方案

Moin Zaman的链接显示过时的测试结果（2008年）。在我今天的彻底测试中，Gmail确实支持为这两种方法显示嵌入式图像。



在< img src =内使用base64编码图像。 ..> 

 < html>< body>< img src =数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO ...< /体>< / HTML>

使用base64编码图像作为附件



<$ p消息ID：
接受语言：en-US
内容语言：en-US
X-MS-Has-Attach：是
X-MS-TNEF-Correlator：
x-originating-ip：[xxx.xxx.xxx.xxx]

内容类型：multipart / related;
boundary =_ 038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_;
type =multipart / alternative
MIME版本：1.0
返回路径：email@example.com
X-OriginatorOrg：example.com

--_ 038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
内容类型：multipart / alternative;
boundary =_ 000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_

...跳过内容类型：文本/纯文本将在此示例...

--_ 000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
内容类型：text / html; charset =iso-8859-1
Content-Transfer-Encoding：quoted-printable

< html>< body>< img border = 3D0width = 3D 980height = 3D230id = 3DPicture_x0020_1src == 3Dcid：image001.png@01CDA268.204677C0>< / body>< / html>

--_ 000_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL _--

--_ 038_BE0243A40B89D84DB342702BC5FD6D313EA3BE1BBYMAIL_
内容类型：image / png; name =image001.png
内容描述：image001.png
Content-Disposition：inline;文件名= image001.png;大小= 32756;
creation-date =Mon，08 Oct 2012 15:27:07 GMT;
modification-date =Mon，08 Oct 2012 15:27:07 GMT;
Content-ID：< image001.png@01CDA268.204677C0>
内容传输编码：的base64

iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO
xAAADsQBlSsOGwAAf5lJREFUeF7tvQlgVdW18L + ZR20mpsSLCYlBQKwgwRCMr9TAqzg0CAl98Y9a
ikBfHxL1A / r0tUr77Feg1mDav4LUijxTk8hLRIstQ2mJhEiAWAEpNCGRa8KUSQXCzLf2cOZz7j33
5s5Zx6j3nruHtX97n33WWWfttbtdv36d4IEEkAASQAJIAAkgASSABJCA / wl0938VWAMSQAJIAAkg
ASSABJAAEkAClAAq3zgOkAASQAJIAAkgASSABJBAgAig8h0g0FgNEkACSAAJIAEkgASQABJA5RvH
...

要进行自己的测试，您可以使用其中一个以下技巧





使用上述之一发送电子邮件到您的Gmail帐户，然后在Gmail Web Client（任何可用的浏览器）中打开电子邮件，并使用回复按钮旁的向下箭头选择显示原始选项。这将告诉你如何收到。



我认为最佳做法是使用嵌入式图片作为附件方式。



在使用Gmail Web Client进行测试时，如果我在一个不同大小的电子邮件中发送了30张图像，则有些图像不会成功显示图像容器而不是图像。如果发生这种情况，请尝试重新加载页面。



在我的测试（Windows 7）...




  • Chrome（最新）需要几次重新加载才能成功加载/显示所有30张图片

  • Opera（最新）不会成功显示所有30张图片，重新加载

  • Firefox（最新）一直显示所有30张图片，无问题

  • Internet Explorer 9（最新）一直显示所有30张图片，无问题

  • Safari（最新）一直显示所有30张图片，无问题


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.

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?

解决方案

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.

Use base64 encoding image inline within <img src="...">

<html><body><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA9QAAADmCAIAAAC77FroAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAO..."</body></html>

Use base64 encoded image as attachment

Message-ID: <BE0243A40B89D84DB342702BC5FD6D313EA3BE1B@BYMAIL.example.com>
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@example.com
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:image001.png@01CDA268.204677C0"></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: <image001.png@01CDA268.204677C0>
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

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.

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.

In my testing (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

这篇关于Base64图像到gmail的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆