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

Posted xuehuashanghe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谷歌邮箱无法显示使用 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 。

以上是关于谷歌邮箱无法显示使用 Base64 处理的图片的解决方法的主要内容,如果未能解决你的问题,请参考以下文章

在 Powerapps 中使用 .image 属性将 Base64 字符串解码为图像并显示

通过http方式传递base64图片字符串无法还原成图片

CKEditor图片上传问题(默认安装情况下编辑器无法处理图片),通过Base64编码字符串解决

图片返回是一个字符串,页面无法显示

uniapp image标签base64不显示图片的问题

高拍仪拍照之后图片显示问题