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

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

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAaCAIAAACvsEzwAAABxElEQVR42tWYS2rDMB......
   
   
1
第一种,css方式:

div.image {
    width: 99px;
    height: 42px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA......);
}
   
   
1
2
3
4
5
第二种,img标签方式

<img width="900" height="450" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAAAqCAYAAA...."/>
   
   
1
注意,如果图片很大的话,转成的data字符串也很长,我这里一个小图片直接15w的字符了,所以这种方式适合比如logo,验证码这种小图片,又不希望存在服务器的应用场景

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