谷歌邮箱无法显示使用 Base64 处理的图片的解决方法

有时候图片会使用 Base64 编码来处理,然后再传到前端 img 标签的 src 属性里展示,这里记录遇到的一个问题,就是使用谷歌邮箱来打开图片,使用了 Base64 编码处理的图片是展示不出来的,不是找不到,是直接 src 属性都会不见了(可以在浏览器上按F12打开控制台查看),经过多次测试发现,谷歌邮箱似乎对 “data:image/jpg;base64,” 这串 Base64 编码处理的编码头有意见,只要带有这个编码头文件,src 属性直接诡异失踪,img 图片不展示。但是使用 Base64 编码处理,要在 src 属性里面展示图片,这个编码头文件又是必须要带入的,不带入依然无法展示图片;而国内大部分邮箱是没有这个问题的,都是可以正常展示的,所以怀疑估计是谷歌邮箱不兼容这种编码方式吧。

解决方法:

后台取到 Base64 编码的文件后,直接在后台处理成流文件,再写给前端浏览器展示,即可避开在谷歌邮箱里面直接读取 Base64 编码不兼容的问题。

代码:

注意:谷歌邮箱要求比较严格,路径必须用 “https” 开头才行,同时本地 localhost 是测试不了的(自己是这种情况,必须部署到公司服务器上才能正常展示),国内的邮箱使用 “http” 或者 “https” 都可以。

前端 <img src="url"/> 中的 url 写法:

<img src="https:xxx.xxx.com/demo/ec/findS4Photo?id=xxxxxxxx"/>

前端请求方法:

@RequestMapping(value = "ec/findS4Photo", method = RequestMethod.GET)
public void findS4Photo(HttpSession session, HttpServletRequest request, HttpServletResponse response) {
	log.info("==进来处理图片了==");

	// ec/fs4?id=5b9f6a1b5a83c1377c32b058
	try {
		String id= request.getParameter("id");

		if (StringUtils.isNotBlank(id)) {
        
			//根据id取到Base64编码(自己 Base64 处理的编码存在数据库,所以从数据库中取,自己的存在哪里就从哪里取)           
			String base64Code = qrcodeService.getQrcodeBase64PhotoById(qrcodeId);

			try {
				response.setContentType("image/*"); // 设置返回的文件类型
				OutputStream toClient = response.getOutputStream();
				generateImage(base64Code, toClient);// 核心处理方法
			} catch (Exception ex) {
				System.out.println(ex.toString());
			}

		}
	} catch (Exception e) {
		e.printStackTrace();
	}
	log.info("==结束处理图片了==");
}

处理方法:

public static boolean generateImage(String base64Code, OutputStream out) {

	// 图像数据为空
        if (base64Code == null || "".equals(base64Code)){
                return false;
        }
	BASE64Decoder decoder = new BASE64Decoder();
	try {
		// Base64解码
		byte[] b = decoder.decodeBuffer(base64Code);
		for (int i = 0; i < b.length; ++i) {
			if (b[i] < 0) {// 调整异常数据
				b[i] += 256;
			}
		}
		// OutputStream out = new FileOutputStream(imgFilePath);
		out.write(b);
		out.flush();
		out.close();
		return true;
	} catch (Exception e) {
		return false;
	}
}

最后稍微提一下:前端 url 路径由于直接访问后台,可以做一下加密处理,包括传的参数 id 。

原文地址:https://www.cnblogs.com/xuehuashanghe/p/10445170.html

时间: 2024-11-07 23:35:20

谷歌邮箱无法显示使用 Base64 处理的图片的解决方法的相关文章

VMware ESXi中不能显示CPU及内存使用情况的解决方法

今天一个网友问我,他管理的机房有4台ESXi 5.1的服务器,其中三台ESXi Server不能显示各个虚拟机占用的CPU.内存情况了,如图1-1所示. 图1-1在"虚拟机"选项卡中不能显示每个启动虚拟机的资源占用情况 另外,在VMware ESXi的"摘要"中,CPU与内存的使用情况也统计出错,如图1-2所示. 图1-2 摘要统计出错 在出现这个问题时,各个ESXi Server上的虚拟机可以正常启动.关闭,并且各虚拟机运行的系统及应用不受影响. 从上面两个图我看

微信二次分享不显示摘要和图片的解决方法

微信二次分享不显示摘要和图片的解决方法 解决不显示摘要和图片的问题,需要调用微信公众号的js-sdk的api ,需要前端和后台的配合, 后台需要返回 appid (公众号的appid ) . timestamp (生成签名的时间戳) .nonceStr (签名的随机字符串) . signature (签名* 可能出错): 1.绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"js接口安全域名".(特别提示不需要加上http或者h

编绎显示Unknown type name “CGFloat”等 错误解决方法

一.编绎显示Unknown type name "CGFloat" 等 错误解决方法 将Compile Sources As 改为 Objective-C++ 二.如果是extern const引起的.直接加头文件 #import <UIKit/UIKit.h>

ftp服务器显示500 oops cannot change home/harry解决方法

linux 6.0搭建ftp服务器,ftp服务器配置操作如下: #yum install –y vsftpd #chkconfig vsftpd on #service vsftpd start #vi /etc/vsftpd/vsftpd.conf 修改anonymous_enable=YES local_enable=YES 增加行: anno_root=/var/ftp/pub/ anno_other_write_enable=yes #vi /etc/hosts.deny 添加一行: v

svn删除目录后提交显示Item &#39;XXXX&#39; is out of date解决方法

http://www.2cto.com/os/201211/166515.html —————————————————————————————————————————————————————————————— svn删除目录后提交显示Item 'XXXX' is out of date解决方法 1.在要删除的目录上执行 svn 的 Delete  www.2cto.com 2.来到要删除目录的上级目录,执行更新操作. 3.找到要删除的目录,会显示冲突状态,在这个目录上执行Resolved. 4.

文档大师 在Win10 IE11下,文档集画面无法正常显示Word等Office文档的解决方法

在文档集界面中显示Word文档,是文档大师的一个核心功能. 最近在 Win10 升级到最新版后,发现 无法正常显示Office 文档的问题. 一开始以为是Word版本问题,从2007升级到2016,问题仍没解决. 用关键字“ie11 word 显示不全”搜索,看了几个搜索结果,找到了答案:"关闭IE11". 操作: 1. Win10 控制面板,在卸载软件界面左边栏有“打开和关闭win功能”,打开后将IE前面的对勾去掉 2.重启机器后,打开文档大师,显示正常了. 当然,问题的本质是Win

Tortoise SVN 右键 show log 不显示 Author,Date,Message 的解决方法

今天加入新项目,看了看 Tortoise SVN show log,结果发现: 解决方案: 因为是新加入的项目,问了原来负责这个项目的同事,他说他那也是这个问题,汗,说明问题不是出现在客户端. 在服务的 svn 版本库中找到该项目,编辑 svnserve.conf,把 anon-access = read 改为 anon-access = none 然后重启 SVN 服务: killall svnserve svnserve -d -r /usr/local/svn 问题解决. 参考:<SVN使

IOS开发证书显示“此证书的签发者无效”解决方法

今天早上同事说咱们的证书无法使用了,显示“此证书的签发者无效”.一开始以为谁误操作了证书,查看后发现所有证书都无效了.查了会才发下原来是Apple Worldwide Developer Relations Certification Authority Intermediate Certificate证书刚好在今天过期了. 首先打开自己的Keychain,删除原来已经过期的WWDR证书.(这里我已经删除并更新了)  在Apple PKI网页下载最新的证书:https://developer.a

centos7开机显示:welcome to emergency mode 的解决方法

CentOS7.3昨天用的还好好的的,但是今天开机提示如下(如图提示):welcome to emergency mode!after logging in ,type "journalctl -xb" to view system logs,"systemctl reboot" to reboot ,"systemctl default" to try again to boot into default mode.give root pass