将图片通过byte[]字节数组Base64编码后给前端显示

1.base64编码显示图片

一般我们后台给前端传图片,有两种方式,一种就是通过response.getOutputStream直接将图片以流的形式写到页面显示,另一种就是先把图片上传到服务器,拿到url地址后把url地址给前端

第一种方式简单,不需要服务器,但是这种不太符合现在开发的要求,因为我们通常需要在响应的时候,加上额外的字段表示响应成功状态,以及错误信息,而直接将图片作为流写回前端的话,response是不能携带这些参数的. 第二种方法需要有一个服务器,且上传图片又是一个额外的步骤.

这个时候我们就可以将图片的字节数组通过base64编译后返回前端,前端直接拿了可以显示为图片

获取图片的字节数组看上一篇博客:

java通过Http请求访问网络图片或文件返回byte数组的两种方式

2. 字节数组base64编译

 byte[] bytes;//图片的字节数组
 BASE64Encoder encoder = new BASE64Encoder();
 String data = encoder.encode(bytes);
//data = iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......

3. 前端显示

前端拿到这个data字符串后,有两种方式显示图片

先拼接一下前缀, 分别是data:图片类型 ; 编码类型, data字符串数据

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......

第一种,css方式:

div.image {
    width: 99px;
    height: 42px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......);
}

第二种,img标签方式

<img width="900" height="450" src="https://img-blog.csdnimg.cn/2022010612264818856.png"/>

注意,如果图片很大的话,转成的data字符串也很长,我这里一个小图片直接15w的字符了,所以这种方式适合比如logo,验证码这种小图片,又不希望存在服务器的应用场景

自己拼接了<img>标签后,可以在markdown2直接粘贴看看效果