各种返回图片在前端显示以及转化

火锅底料

生活不可能像你想象的那么好，但也不会像你想象的那么糟。莫泊桑

作为前端人员，日常少不了会跟图片打交道；

1、图片在后端中存储

一般来说，图片在后端的存储方式分为两种：
其一：可以将图片以独立文件的形式存储在服务器的指定文件夹中，再将路径存入数据库字段中;
其二：将图片转换成二进制流，直接存储到数据库的 Image 类型字段中.

对于第一种存储方式，我们前端直接将存储路径赋值给 src 属性即可轻松显示。
对于第二种存储方式，我们前端需要将其二进制流交由 blob 对象处理，然后通过 blob 的 API 生成临时 URL 赋值给 src 属性来显示。

2、图片存储的三种形式

url、base64、blob，三者之间转化

详情链接：各种返回图片在前端显示以及转化 - 简书 (jianshu.com)

3、展示图片

（1）使用image标签，设置src=url可展示图片；

（2）后端返回数据图片流，前端解析展示；

后端代码，把图片文件流输出到前端

    @ApiOperation(value = "返回图片流")
    @RequestMapping(value = "/baseinfo")
    public void infoHe(HttpServletResponse response) {
        InputStream in = null;
            //从minio文件服务器上获取图片流
            in = minioClient.getObject(bucketName, "company/template_back_20200627160552.png");
            response.setContentType("image/png");
            OutputStream out = response.getOutputStream();
            byte[] buff = new byte[100];
            int rc = 0;
            while ((rc = in.read(buff, 0, 100)) > 0) {
                out.write(buff, 0, rc);
            out.flush();
        } catch (Exception e) {
            log.error(e.getMessage(), e);
            PropertiesConfig.globalResponse(ResultCode.FAILED);
//            return ResponseResult.success();
        }finally {
    }

前端代码,发送ajax请求，然后把图片流转成blob，再通过blob创建url，这样就可以了

              axios.request({
                        url: 'file/baseinfo',
                        responseType: 'blob',
                        method: 'post',
                        params:{
                            fileName:fileName
                    }).then(res => {
                        let blob = new Blob([res.data],{type: "image/png"});
                        let url = window.URL.createObjectURL(blob);
                        this.imgSrc=url;