前端调取后端图片的时间 SpringBoot+Vue3+MySQL

介绍：

后端MySQL图片要存储为base64编码，因为图片格式没办法直接存储在数据库里面。前端获取到MySQL传的base64编码过后，将这个编码转为图片格式。前端具体转码过程为

<img src="'data:image/png;base64,'+yourBase64"/>

"data:"用于表示后面的内容是内联数据

"imge/"用于指定数据MIME类型，后面跟的表示数据类型（可忽略）

";base64"表示数据是使用的base64编码格式

"yourBase64"表示需要传递的base64编码

MySQL存储图片（这里使用Navicat演示）：

img选择mediumblob类型，用于存储图片

选择图像

下方会出现选择文件和保存的图标，用于选取图片来保存

之后按照上一篇讲过的，将这里设计img格式对应到后端实体类型的byte[]格式

    private byte[] img;

前端转图片格式

确保前端成功调取到存储的图片的base64编码，之后就直接转图片就好了

<img :src="'data:image/png;base64,' + item.img" class="styles_teacher-avatar__3ZJAu">

 

你的关注+点赞是我创作的动力。