关于前端显示图片的问题

背景

由于要在项目中添加生成二维码的功能，所以需要在生成二维码之后在页面展示二维码

问题

1. 1、首先生成二维码的时候存放的路径是本地的路径，但是在前端显示不了
2. 2、转换思路，既然本地路径不行，那就存到服务器上吧，但是由于后期会生成很多二维码，考虑到服务器内存问题，所以放弃了。
3. 直接后台把图片地址转换为二进制的流，

```java
			//生成二维码的名称和路径
            File desktopDir = FileSystemView.getFileSystemView().getHomeDirectory();
            //获取桌面路径
            String desktopPath = "F:/qrCode";
            String destPath = desktopPath + "/jam.jpg";
   
   			//嵌入二维码图片的地址
            String imgPath = null;
   
   			//生成二维码
            QRCodeUtil.encode(text, imgPath, destPath, true);
            //调用把图片转换为base64 数据方法 参数是需要传base64图片的路径
            String strImg =QRCodeController.GetImageStr(destPath);
            
            //图片转化为二进制
            byte[] imageBytes = null;
            try (FileInputStream fileInputStream = new FileInputStream(new File(destPath))) {
                imageBytes = new byte[fileInputStream.available()];
                fileInputStream.read(imageBytes);
            } catch (IOException e) {
                e.printStackTrace();
            }
            System.out.println(imageBytes)

4.图片已经转换为二进制的流了，下面就是在前端展示了，可能是我组件的问题吧，下面这个方法不能用，请看代码。

     getImg() {
         const host = 'http://localhost:8080/';
         const url2 = host + 'api/bpm-extend/repository/process-definitions/myEclipseDemo:7:227504/diagram-resource';
         const firstheaders = new Headers();
         firstheaders.append('Content-Type', 'image/png');
         const opts: RequestOptionsArgs = {
              headers: new HttpHeaders().append('Content-Type', 'image/png'),
             responseType: 3
         }
         this.http.get(url2, opts).map((resp) => resp.json()).catch((err) => {throw err;})
             .subscribe((val) => {
                 this.imgUrl = this.sanitizer.bypassSecurityTrustUrl( window.URL.createObjectURL(val) );
                 console.log(this.imgUrl + '地址');
         })
     }

上面那个方法来自Guoye 的文章

5.然后只能把图片转为base64了

 //路径
            String destPath = basePath + "/jam.jpg";

            //嵌入二维码图片的地址
            String imgPath = null;

            QRCode qr = new QRCode();
            qr.setPerson(qrCode.getPerson());
            qr.setCode(qrCode.getCode());
            qr.setJyScop(qrCode.getJyScop());
            qr.setName(qrCode.getName());
            qr.setRegistNo(qrCode.getRegistNo());
            String text = JSON.toJSONString(qr);

            //生成二维码
            QRCodeUtil.encode(text, imgPath, destPath, true);
            //调用把图片转换为base64 数据方法 参数是需要传base64图片的路径
            String strImg = QRCodeController.GetImageStr(destPath);
            System.out.println(text);
            //生成二维码
            QRCodeUtil.encode(text, null, destPath, true);

  	//图片转化成base64字符串
    public static String GetImageStr(String imageName) {
        //将图片文件转化为字节数组字符串，并对其进行Base64编码处理
        //待处理的图片
        String imgFile = imageName;
        InputStream in = null;
        byte[] data = null;
        //读取图片字节数组
        try {
            in = new FileInputStream(imgFile);
            data = new byte[in.available()];
            in.read(data);
            in.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
        //对字节数组Base64编码
        BASE64Encoder encoder = new BASE64Encoder();
        //返回Base64编码过的字节数组字符串
        return encoder.encode(data);
    }

    //base64字符串转化成图片
    //对字节数组字符串进行Base64解码并生成图片
    public static boolean GenerateImage(String imgStr, String imageName) {
        //图像数据为空
        if (imgStr == null)
            return false;
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            //Base64解码
            byte[] b = decoder.decodeBuffer(imgStr);
            for (int i = 0; i < b.length; ++i) {
                //调整异常数据
                if (b[i] < 0) {
                    b[i] += 256;
                }
            }
            //生成jpeg图片
            //新生成的图片
            String imgFilePath = imageName;
            OutputStream out = new FileOutputStream(imgFilePath);
            out.write(b);
            out.flush();
            out.close();
            return true;
        } catch (Exception e) {
            return false;
        }
    }

前端img中直接放base64数据就能显示了